一、Popup气泡
Popup气泡类似于Android的Toast和IOS中的HUD，作为一种实用的UI组件特性，为应用程序提供了丰富的气泡弹窗功能，旨在提升用户体验、引导用户操作，以及在特定场景（如屏幕录制、信息提醒等）中清晰呈现相关状态。
气泡类型与基本配置
Popup属性支持两种类型的气泡提示：
- PopupOptions：系统预设的气泡类型，适用于快速创建带有标准样式的气泡。通过配置
primaryButton和secondaryButton，可为气泡添加最多两个交互按钮，实现简单操作的触发。 - CustomPopupOptions：允许开发者自由定制气泡内容与样式。通过传入
builder参数，使用构建器函数自定义气泡内部结构，同时可通过popupColor等属性调整气泡外观。
文本提示气泡
文本提示气泡主要适用于仅需展示文本信息，无需用户交互的场景。要实现此类气泡，需按照以下步骤操作：
- 绑定组件：在目标组件（如Button）上绑定
Popup属性。 - 控制显示状态：通过一个布尔变量（如
handlePopup）管理气泡的显示与否。当该变量为true时，气泡弹出；反之，气泡隐藏。
1@Entry
2@Component
3struct PopupExample {
4 @State handlePopup: boolean = false;
5
6 build() {
7 Column() {
8 Button('PopupOptions')
9 .onClick(() => this.handlePopup = !this.handlePopup)
10 .bindPopup(this.handlePopup, { message: 'This is a popup with PopupOptions' });
11 }
12 .width('100%')
13 .padding({ top: 5 });
14 }
15}
监听气泡状态变化
借助onStateChange回调函数，开发者可以实时捕获气泡的显示状态变化，并据此执行相应的逻辑。例如，当气泡关闭（isVisible为false）时，同步更新控制气泡显示状态的布尔变量。
1@Entry
2@Component
3struct PopupExample {
4 @State handlePopup: boolean = false;
5
6 build() {
7 Column() {
8 Button('PopupOptions')
9 .onClick(() => this.handlePopup = !this.handlePopup)
10 .bindPopup(this.handlePopup, {
11 message: 'This is a popup with PopupOptions',
12 onStateChange: (e) => {
13 if (!e.isVisible) {
14 this.handlePopup = false;
15 }
16 }
17 });
18 }
19 .width('100%')
20 .padding({ top: 5 });
21 }
22}
带按钮的交互气泡
通过配置primaryButton和secondaryButton，为气泡添加交互按钮，每个按钮关联一个action函数，用于响应用户的点击操作。
1@Entry
2@Component
3struct PopupExample22 {
4 @State handlePopup: boolean = false;
5
6 build() {
7 Column() {
8 Button('PopupOptions')
9 .onClick(() => this.handlePopup = !this.handlePopup)
10 .bindPopup(this.handlePopup, {
11 message: 'This is a popup with PopupOptions',
12 primaryButton: {
13 value: 'Confirm',
14 action: () => {
15 this.handlePopup = !this.handlePopup;
16 console.info('confirm Button click');
17 }
18 },
19 secondaryButton: {
20 value: 'Cancel',
21 action: () => this.handlePopup = !this.handlePopup
22 },
23 onStateChange: (e) => {
24 if (!e.isVisible) {
25 this.handlePopup = false;
26 }
27 }
28 });
29 }
30 .width('100%')
31 .padding({ top: 5 });
32 }
33}
自定义气泡内容与样式
使用CustomPopupOptions，开发者可以通过builder参数定义气泡的内部布局，并结合popupColor等属性调整气泡外观。以下示例展示了如何构建一个包含图标、标题与描述文字的自定义气泡：
1@Entry
2@Component
3struct Index {
4 @State customPopup: boolean = false;
5
6 @Builder popupBuilder() {
7 Row({ space: 2 }) {
8 Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 });
9 Text('This is Custom Popup').fontSize(15);
10 }
11 .width(200)
12 .height(50)
13 .padding(5);
14 }
15
16 build() {
17 Column() {
18 Button('CustomPopupOptions')
19 .position({ x: 100, y: 200 })
20 .onClick(() => this.customPopup = !this.customPopup)
21 .bindPopup(this.customPopup, {
22 builder: this.popupBuilder,
23 placement: Placement.Bottom,
24 popupColor: Color.Pink,
25 onStateChange: (e) => {
26 console.info(JSON.stringify(e.isVisible));
27 if (!e.isVisible) {
28 this.customPopup = false;
29 }
30 }
31 });
32 }
33 .height('100%');
34 }
35}
此外，通过设置placement参数，可灵活指定气泡相对于触发元素的弹出位置，以适应不同的界面布局和用户习惯，从而提升UI体验。
二、Menu菜单
Menu接口：轻松构建菜单系统
Menu接口作为一款强大的UI组件，旨在为应用程序提供灵活、易用的菜单功能，广泛应用于鼠标右键弹窗、点击弹窗等场景。本文将详细阐述Menu接口的使用方法，涵盖创建默认样式菜单、自定义样式菜单、支持右键或长按触发的菜单，以满足不同场景下的交互需求。
创建默认样式菜单
要实现一个默认样式的菜单，只需按照以下步骤操作：
- 调用bindMenu接口：将菜单绑定到目标组件（如Button），当用户点击该组件时，菜单弹出。
- 配置菜单项：在
bindMenu方法中传入一个数组，数组中的每个对象代表一个菜单项，包含value（菜单项文本）和action（点击时触发的回调函数）。
Button('click for Menu')
.bindMenu([
{
value: 'Menu1',
action: () => {
console.info('handle Menu1 select')
}
}
])
创建自定义样式菜单
当默认样式无法满足需求时，可以通过@Builder装饰器自定义菜单内容。具体步骤如下：
- 定义自定义菜单项：使用
@Builder装饰器创建自定义菜单内容，如SubMenu和MyMenu。在构建器函数内，可以使用Menu()、MenuItem()、MenuItemGroup()等方法组合构建多层次、具有丰富样式的菜单结构。 - 配置菜单项属性：为菜单项设置起始图标、内容、结束图标、是否启用、选中状态、子菜单等属性，并通过
onChange等回调函数处理用户交互。 - 绑定自定义菜单：在目标组件上使用
.bindMenu(this.MyMenu)将自定义菜单绑定到组件。
@Builder
SubMenu() {
Menu() {
MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
}
}
@Builder
MyMenu() {
// 自定义菜单内容...
}
Button('click for Menu')
.bindMenu(this.MyMenu)
创建支持右键或长按的菜单
若需支持右键或长按触发菜单，应使用bindContextMenu接口替代bindMenu。通过指定ResponseType参数，确定触发方式（如ResponseType.RightClick表示右键触发）。使用bindContextMenu创建的菜单会在独立子窗口内显示，可跨越应用窗口边界。
// @Builder开发菜单内的内容与上文相同...
Button('click for Menu')
.bindContextMenu(this.MyMenu, ResponseType.RightClick)综上所述，Menu接口提供了丰富的API与自定义能力，帮助开发者快速构建符合业务需求的菜单系统，支持鼠标右键、点击、长按等多种触发方式，极大地提升了应用程序的交互体验与功能完备性。
