鸿蒙HarmonyOS开发：多种内置弹窗及自定义弹窗的详细使用指南

一、消息提示框（showToast）

Toast（消息提示），常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。

1、导入模块

import promptAction from '@ohos.promptAction';

2、语法

showToast(options: ShowToastOptions): void

3、参数

4、示例

Button("提示信息")
.onClick(() => {
      promptAction.showToast({
        message: '网络连接已断开！'//弹窗内容
      });
})

5、效果

二、对话框（showDialog）

1、导入模块

import promptAction from '@ohos.promptAction';

2、语法

showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse>

3、参数

4、示例

Button("删除")
.onClick(() => {
      promptAction.showDialog({
        title: '删除该记录？',//弹窗标题
        message: '删除后无法恢复，您确认要删除吗？',//弹窗内容
        buttons: [// 按钮的数组
          {
            text: '确认',
            color: '#ff0000'
          },
          {
            text: '取消',
            color: '#0000ff'
          },
        ],
      })
        .then(data => {
          console.info('click button: ' + data.index);
        })
        .catch((err: Error) => {
          console.info('showDialog error: ' + err);
        })
})

5、效果

三、警告弹窗（AlertDialog）

AlertDialog（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。

1、语法

AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)

2、参数

3、AlertDialogParam对象说明

4、示例

Button('删除')
  .onClick(() => {
    AlertDialog.show(
      {
        title: '删除该记录？',//弹窗标题
        message: '删除后无法恢复，您确认要删除吗？',//弹窗内容
        autoCancel: true,//点击遮罩层，是否关闭弹窗
        primaryButton: { // 主要按钮，左侧
          value: '确认',
          fontColor:'#ff0000',
          action: () => {
            console.info('Button-clicking callback')
          }
        },
        secondaryButton: { // 次要按钮，右侧
          value: '取消',
          fontColor:'#0000ff',
          action: () => {
            console.info('Button-clicking callback')
          }
        },
        cancel: () => {
          console.info('showDialog cancel');
        }
      }
    )
  })

5、效果

四、操作菜单（showActionMenu）

showActionMenu（操作菜单弹窗）用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。

1、导入模块

import promptAction from '@ohos.promptAction';

2、语法

showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse>

3、参数

4、ActionMenuOptions选项

5、示例

Button("操作菜单")
.onClick(() => {
  promptAction.showActionMenu({
    title: '上传图片',
    buttons: [
      {
        text: '拍照',
        color: '#909399'
      },
      {
        text: '从相册选择',
        color: '#E6A23C'
      },
      {
        text: '微信记录',
        color: '#67C23A'
      },
    ]
  })
    .then(data => {
      console.info('click button: ' + data.index);
    })
    .catch((err: Error) => {
      console.info('showActionMenu error: ' + err);
    })

})

6、效果

五、操作列表弹窗（ActionSheet）

ActionSheet（操作列表弹窗）用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。

1、语法

ActionSheet.show(value: ActionSheetOptions)

2、参数

3、ActionSheetOptions对象说明

4、SheetInfo接口说明

5、示例

Button("选择操作")
    .onClick(() => {
        ActionSheet.show({
          title: '文件操作',
          message: '请选择你要对该文件执行的操作',
          confirm: {
            value: '取消',
            action: () => {
              console.log('Get Alert Dialog handled')
            }
          },
          cancel: () => {
            console.log('actionSheet canceled')
          },
          sheets: [
            {
              title: '复制',
              icon: $r("app.media.copy"),
              action: () => {
                console.log('apples')
              }
            },
            {
              title: '剪切',
              icon: $r("app.media.shear"),
              action: () => {
                console.log('bananas')
              }
            },
            {
              title: '删除',
              icon: $r("app.media.delete"),
              action: () => {
                console.log('pears')
              }
            }
          ]
        })
    })

6、效果

六、文本滑动选择器弹窗 (TextPickerDialog)

选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS内置了多种选择器弹窗，例如文本选择器、日期选择器、时间选择器等等。

1、语法

TextPickerDialog.show(options: ShowToastOptions): void

2、参数

3、TextPickerDialogOptions对象说明

4、TextPickerResult对象说明

5、示例

Text(this.message)
Button("选择文本")
    .onClick(() => {
      TextPickerDialog.show({
        range: ['苹果', '西瓜', '鸭梨', '香蕉', '橙子'],
        selected: this.selected,
        onAccept: (value: TextPickerResult) => {
          this.selected = value.index
          this.message = value.value
        },
        onCancel: () => {
          console.info("TextPickerDialog:onCancel()")
        }
      })
    })

6、效果

七、自定义弹窗 (CustomDialog)

自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。

当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。

1、语法

CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})

2、参数

3、CustomDialogController

dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})

4、方法

• open()：显示自定义弹窗内容，允许多次使用，但如果弹框为SubWindow模式，则该弹框不允许再弹出SubWindow弹框。

• close()：关闭显示的自定义弹窗，若已关闭，则不生效。

5、创建自定义弹窗

• 使用@CustomDialog装饰器装饰自定义弹窗。

• @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  build() {
    Column() {
      Text('我是内容')
      .fontSize(20)
      .margin({ top: 10, bottom: 10 })
    }
  }
}

• 创建构造器，与装饰器呼应相连。

dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
})

• 点击与onClick事件绑定的组件使弹窗弹出

Button('click me')
    .onClick(() => {
      this.dialogController.open()
    })

6、示例

@Entry
@Component
struct CustomDialog {
  @State answer: string = '?'
  // 创建构造器，与装饰器呼应相连。
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      // 确认按钮回调函数
      confirm: (val) => {
        this.onAccept(val)
      },
    })
  })

  // 确认
  onAccept(val: string) {
    this.answer = val
  }

  build() {
    Column({ space: 20 }) {
    Row() {
        Text('1+1=')
        Text(this.answer)
      }

      Button('作答')
        .onClick(() => {
          // 打开自定义弹窗
          this.dialogController.open()
        })

    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}


// @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  confirm: (val: string) => void
  answer: string = ''

  build() {
    Column({ space: 20 }) {
      Text('请输入你的答案')
        .fontSize(20)
      TextInput({ placeholder: "请输入数字" })
        .type(InputType.Number)
        .onChange((value: string) => {
          this.answer = value
        })
      Row({ space: 40 }) {
        Button('取消')
          .onClick(() => {
            // 关闭弹窗
            this.controller.close()
          })
        Button('确定')
          .onClick(() => {
            // 关闭弹窗
            this.controller.close()
            // 确认按钮回调函数
            this.confirm(this.answer)
          })
      }
    }.padding(20)
  }
}

7、效果