鸿蒙UI系统组件18——模态交互框(ModelDialog)

1、概 述

模态（Modal）指的是UI组件或视图的一种状态。在模态组件消失前，用户只能对处于模态的组件或视图进行响应，不能操作其他非模态的组件或视图。

ArkUI中可通过使用AlertDialog、CustomDialog、ActionSheet、Popup、Menu、ContextMenu等组件实现模态类弹窗能力。

• AlertDialog

通常用来展示用户当前需要或必须关注的信息或操作。如用户操作一个敏感行为时响应一个二次确认的弹窗。

• ActionSheet

当需要用户关注或确认的信息存在列表选择时使用。

• CustomDialog

当用户需要自定义弹窗内的组件和内容时使用。

• Popup

用于为指定的组件做信息提示。如点击一个问号图标弹出一段气泡提示。

• Menu/ContextMenu

用于给指定的组件绑定用户可执行的操作，如长按图标展示操作选项等。

我们可以通过配置参数（例如：CustomDialog的isModal）调整弹窗为非模态弹窗，从而满足不同的使用场景。 移动设备中，子窗模式的弹窗当前无法超出主窗口。 多个弹窗组件先后弹出时，后弹出的组件的层级高于先弹出的层级，退出时按照层级从高到低的顺序逐次退出。

2、全局弹窗

全局弹窗不与任何组件绑定，一般用于针对用户触发的操作进行必要提示时使用。ArkUI当前提供了定制和自定义两类弹窗组件。

• 定制：AlertDialog、ActionSheet、promptAction.showDialog、promptAction.showActionMenu。使用此类组件需要指定显示的文本内容和按钮操作即可完成简单的交互效果。

• 自定义：CustomDialog、promptAction.openCustomDialog。需要根据场景传入自定义组件填充在弹窗中实现自定义的弹窗内容。

下面以AlertDialog、ActionSheet 和 CustomDialog为例说明相应的弹窗效果与使用方法。

2.1、AlertDialog

AlertDialog： 警告弹窗，需要向用户提问或得到用户的许可。

• 警告弹窗用来提示重要信息，但会中断当前任务，尽量提供必要的信息和有用的操作。

• 避免仅使用警告弹窗提供信息，用户不喜欢被信息丰富但不可操作的警告打断。

• 必选内容包含：标题、可选信息文本、最多3个按钮。

• 可选内容包含：输入框、icon、checkBox和HelpButton。

@Entry@Componentstruct AlertDialogExample {
  
    build() {
  
      Column({ space: 5 }) {
  
        Button('two button dialog')        .onClick(() => {
  
            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')                }              }            }          )        }).backgroundColor(0x317aff)    }.width('100%').margin({ top: 5 })  }}

2.2、ActionSheet

ActionSheet： 列表选择弹窗。

• 适合展示多个操作项，尤其是除了操作列表以外没有其他的展示内容。

@Entry@Componentstruct ActionSheetExample {
  
    build() {
  
      Flex({ direction: FlexDirection