ArkUI学习-AlertDialog

一、弹窗

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

名称	使用场景
AlertDialog	通常用来展示用户当前需要或必须关注的信息或操作。如用户操作一个敏感行为时响应一个二次确认的弹窗。
ActionSheet	当需要用户关注或确认的信息存在列表选择时使用。
CustomDialog	当用户需要自定义弹窗内的组件和内容时使用。
Popup	用于为指定的组件做信息提示。如点击一个问号图标弹出一段气泡提示。
Menu/ContextMenu	用于给指定的组件绑定用户可执行的操作，如长按图标展示操作选项等。

二、AlertDialog弹窗

1、介绍：

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

警告弹窗用来提示重要信息，但会中断当前任务，尽量提供必要的信息和有用的操作。
避免仅使用警告弹窗提供信息，用户不喜欢被信息丰富但不可操作的警告打断。
必选内容包含：标题、可选信息文本、最多3个按钮。
可选内容包含：输入框、icon、checkBox和HelpButton。

php 复制代码

@Entry
@Component
struct 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 })
  }
}

三、ActionSheet：列表选择弹窗。

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

php 复制代码

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
  Button('Click to Show ActionSheet')
    .onClick(() => {
      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')
            }
          }
        ]
      })
    })
}.width('100%')
.height('100%')

四、CustomDialog：自定义弹窗。

当开发者需要自定义弹窗的内容和样式时，可选择CustomDialog。更建议使用promptAction.openCustomDialog。

typescript 复制代码

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  private customDialogComponentId: number = 0

  @Builder customDialogComponent() {
    Column() {
      Text('提示').fontSize(30)
      Text('欢迎进入弹窗')
        .fontSize(20)
        .fontColor(Color.Pink)
      Row({ space: 50 }) {
        Button("确认")
          .onClick(() => {
          promptAction.closeCustomDialog(this.customDialogComponentId)
        })
        Button("取消").onClick(() => {
          promptAction.closeCustomDialog(this.customDialogComponentId)
        })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Row() {
      Column({ space: 20 }) {
        Button('组件内弹窗')
          .fontSize(30)
          .onClick(() => {
            promptAction.openCustomDialog({
              builder: () => {
                this.customDialogComponent()
              },
              onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
                // console.info("reason" + JSON.stringify(dismissDialogAction.reason))
                // console.log("dialog onWillDismiss")
                if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
                  dismissDialogAction.dismiss()
                }
                if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
                  dismissDialogAction.dismiss()
                }
              }
            }).then((dialogId: number) => {
              this.customDialogComponentId = dialogId
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

五、使用气泡Popup

当点击目标组件或交互区时，弹出内容在其他内容之上，可使用Popup来指示当前功能如何操作。

typescript 复制代码

@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false

  build() {
    Flex({ direction: FlexDirection.Column }) {
      // PopupOptions 类型设置弹框内容
      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 })
    }.width('100%').padding({ top: 5 })
  }
}

很多时候需要通过交互弹出一些菜单选项，用于用户操作。此时可通过Menu和MenuItem组件组合成需要弹出的菜单选项内容，然后借助bindMenu和bindContextMenu方法将菜单和组件绑定。

方法名	使用场景
bindMenu	无需预览图场景，需要在非子窗场景显示。
bindContextMenu	需要预览图场景使用，只能在子窗中显示。

1、bindMenu：一种临时性弹出组件，用于展示用户可执行的操作。

less 复制代码

@Entry
@Component
struct Index {
  @State select: boolean = true

  @Builder
  MyMenu() {
    Menu() {
      MenuItem({ content: "菜单选项" })
      MenuItem({ content: "菜单选项" })
      MenuItem({ content: "菜单选项" })
      MenuItem({ content: "菜单选项" })
    }
  }

  build() {
    Row() {
      Column() {
        Text('click to show menu')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .bindMenu(this.MyMenu)
      .width('100%')
    }
    .height('100%')
  }
}

2、bindContextMenu：内容包括菜单、预览图、蒙层，通常在长按桌面图标时使用。