模态弹窗

作者：flfljh

2024-12-24
湖南
本文字数：1792 字
阅读完需：约 6 分钟

（ModelDialog）在 HarmonyOS 应用中提供了多种交互方式，以下是其简易使用方法：

1. 概述

模态状态下，用户只能操作当前弹窗，干扰性强。ArkUI 提供多种模态弹窗组件，包括 AlertDialog、CustomDialog、ActionSheet、Popup、Menu、ContextMenu 等，可根据不同场景选择使用。

2. 使用全局弹窗

定制组件
：
AlertDialog：用于提示重要信息、获取用户许可或提问，包含标题、信息文本、最多 3 个按钮等必选内容，还可添加输入框、icon、checkBox 和 HelpButton 等可选内容。例如：

AlertDialog.show({  title: 'title',  subtitle: 'subtitle',  message: 'text',  autoCancel: true,  alignment: DialogAlignment.Bottom,  gridCount: 4,  offset: { dx: 0, dy: -20 },  primaryButton: {    value: 'cancel',    action: () => { console.info('Callback when the first button is clicked') }  },  secondaryButton: {    enabled: true,    defaultFocus: true,    style: DialogButtonStyle.HIGHLIGHT,    value: 'ok',    action: () => { console.info('Callback when the second button is clicked') }  }})

复制代码

ActionSheet：适用于展示多个操作项的列表选择，包含标题、副标题、消息、确认按钮及多个操作项。例如：

ActionSheet.show({  title: 'ActionSheet title',  subtitle: 'ActionSheet subtitle',  message: 'message',  autoCancel: true,  confirm: {    defaultFocus: true,    value: 'Confirm button',    action: () => { console.log('Get Alert Dialog handled') }  },  alignment: DialogAlignment.Bottom,  offset: { dx: 0, dy: -10 },  sheets: [    { title: 'apples', action: () => { console.log('apples') } },    { title: 'bananas', action: () => { console.log('bananas') } },    { title: 'pears', action: () => { console.log('pears') } }  ]})

复制代码

自定义组件（CustomDialog）：开发者可自定义弹窗内容和样式，通过promptAction.openCustomDialog更方便实现。示例中自定义了一个包含文本输入框和确认、取消按钮的弹窗，用于修改文本内容。

3. 使用气泡 Popup

用于为指定组件提供信息提示，点击目标组件时弹出。通过bindPopup方法绑定，设置弹框内容、按钮及状态变化回调。例如：

Button('PopupOptions') .onClick(() => { this.handlePopup =!this.handlePopup }) .bindPopup(this.handlePopup, {    message: 'This is a popup with PopupOptions',    placementOnTop: true,    showInSubWindow: false,    primaryButton: { value: 'confirm', action: () => { this.handlePopup =!this.handlePopup; console.info('confirm Button click') } },    secondaryButton: { value: 'cancel', action: () => { this.handlePopup =!this.handlePopup; console.info('cancel Button click') } },    onStateChange: (e) => { console.info(JSON.stringify(e.isVisible)); if (!e.isVisible) { this.handlePopup = false } }  }) .position({ x: 100, y: 150 })

复制代码

4. 使用菜单 Menu

bindMenu：用于在非子窗场景展示用户可执行操作，无需预览图。通过MenuItem组件组合菜单内容，再用bindMenu绑定到组件上。例如：

@BuilderMyMenu() {  Menu() {    MenuItem({ content: "菜单选项" });    MenuItem({ content: "菜单选项" });    MenuItem({ content: "菜单选项" });    MenuItem({ content: "菜单选项" });  }}Row() {  Column() {    Text('click to show menu').fontSize(50).fontWeight(FontWeight.Bold);  } .bindMenu(this.MyMenu) .width('100%');}

复制代码

bindContextMenu：用于需要预览图场景，只能在子窗中显示，内容包括菜单、预览图、蒙层，通常在长按桌面图标时使用。例如：

Column() {  Text('LongPress for menu');}.width('100%').margin({ top: 5 }).bindContextMenu(this.MenuBuilder, ResponseType.LongPress, {  placement: Placement.Left,  preview: MenuPreviewMode.IMAGE})

复制代码

5. 超出应用界面

在 2in1 设备上，可通过showInSubWindow属性设置弹窗或气泡在子窗口中显示，实现超出主窗口效果，如CustomDialog示例中设置showInSubWindow: true。还可使用bindContextMenu为组件绑定菜单实现默认子窗口效果，长按或右键点击触发弹出菜单项，菜单项需自定义。

发布于: 刚刚阅读数: 6

flfljh

关注

还未添加个人签名 2024-10-29 加入

还未添加个人简介

发布

暂无评论

创作场景

模态弹窗

（ModelDialog）在 HarmonyOS 应用中提供了多种交互方式，以下是其简易使用方法：

1. 概述

2. 使用全局弹窗

3. 使用气泡 Popup

4. 使用菜单 Menu

5. 超出应用界面

flfljh

评论