HarmonyOS App 之 Dialog

最近准备系统学习ArkUI和ArkTS相关知识，在这里做一个记录。

本次介绍鸿蒙应用中的Dialog，和各种选择器组件弹框

• DatePickerDialog

DatePickerDialog.show({
    start: new Date("1999-01-01"),
    end: new Date(),
     selected:new Date("2024-03-03"),
    // lunar:true  //是否显示农历
     onAccept:(value: DatePickerResult)=>{
         //选中的值DatePickerResult包含三个值
        year，month（取值0-11实际月份要+1），day         
})

DatePickerDialog

• TextPickerDialog

TextPickerDialog.show({
      range: ["男", "女"],
      selected: 0,
      onAccept: (value: TextPickerResult) => {
           //选中的值TextPickerResult包含两个值
            value（值），index（下标）
      }
})

TextPickerDialog

• AlertDialog

AlertDialog.show({
              message: "你在干什么",
              primaryButton: {
                value: "确定",
                action: () => {
                   //确定事件
                }
              },
              secondaryButton: {
                value: "取消",
                action: () => {
                    //取消事件
                }
              },
              alignment: DialogAlignment.Bottom,//出现位置
              offset: { dx: 0, dy: -20 }//偏移
            })

AlertDialog

• TimePickerDialog

TimePickerDialog.show({
              selected: new Date(),
              useMilitaryTime: true, //是否24小时制
              onAccept: (value: TimePickerResult) => {

              }
            })

TimePickerDialog

• ActionSheet

ActionSheet.show({
              title: 'ActionSheet title',
              message: 'message',
              autoCancel: true,
              confirm: {
                value: '确认',
                action: () => {
                  console.log('Get Alert Dialog handled')
                }
              },
              cancel: () => {
                console.log('actionSheet canceled')
              },
              alignment: DialogAlignment.Bottom,
              offset: { dx: 0, dy: -10 },
              sheets: [
                {
                  title: '苹果',
                  action: () => {
                    console.log('apples')
                    this.message = "苹果"
                  }
                },
                {
                  title: '香蕉',
                  action: () => {
                    console.log('bananas')
                    this.message = "香蕉"
                  }
                },
                {
                  title: '梨',
                  action: () => {
                    console.log('pears')
                    this.message = "梨"
                  }
                }
              ]
            })

ActionSheet

• 自定义dialog

分为2步
1、自定义弹框内容，使用@CustomDialog修饰
2、在页面中使用
*注意 如确认和取消按钮也要自己实现

1、 自定义弹框内容，使用@CustomDialog修饰

@CustomDialog
struct MyDialog {
  private controller: CustomDialogController

  build() {
    Column() {
      Text("随便放点什么")
      Button("我是一个按钮", { type: ButtonType.Capsule })
    }
    .padding(20)

  }

  aboutToAppear() {
    //初始化数据
  }
}

2、 在页面中使用

customDialogController: CustomDialogController = new CustomDialogController({
    alignment: DialogAlignment.Center,
    builder: MyDialog({}),
    offset: { dx: 0, dy: -20 }
  })
 ...
 .onClick(_ => {
     this.customDialogController.open()
 }

自定义dialog内容

总结

基本的dialog用法就这些，官方文档