【Harmony3.1/4.0】笔记六-对话框

概念

对话框在任何一款应用中，任何一个系统或者平台上使用都非常频繁，这里介绍一下鸿蒙系统中对话框的用法，分别为:普通文本对话框，自定义提示对话框，对话框菜单，警告提示对话框，列表选择对话框，自定义对话框，日期对话框，时间对话框，文本列表对话框……

1.普通文本对话框

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  //文本提示对话框
  build() {
    Scroll(){
      Column() {
        Button("普通文本提示对话框").width("60%").height(60).margin(10)
          .onClick(()=>{
            promptAction.showToast({
              message:this.message,//显示的提示内容
              duration:2000,//显示的时长
              bottom:200,//设置提示对话框距离底部的间距
            })
          })
        }.width("100%")
    }
    }
}

2.自定义提示对话框

//该提示对话框默认为中央显示
        Button("自定义提示对话框").width("60%").height(60).margin(10)
          .onClick(()=>{
            promptAction.showDialog({
              title:"带按钮的提示对话框",
              message:"你好，我是自定义提示对话框",
              //对话框中显示两个按钮时横向显示，三个按钮会垂直显示
              buttons:[{
                text:"按钮一",
                color:"#f00",
              },
                {
                  text:"按钮二",
                  color:"#0f0",
              },
                {
                  text:"按钮三",
                  color:"#00f",
                }
               ]
            })
            //给按钮添加点击事件
              .then(data=>{
                switch (data.index){
                  case 0:
                    console.info("第一个按钮被点击了")
                  break;
                  case 1:
                    console.info("第二个按钮被点击了")
                    break;
                  case 2:
                    console.info("第三个按钮被点击了")
                    break;
                }
              })
          })

3.对话框菜单

Button("对话框菜单").width("60%").height(60).margin(10)
          .onClick(()=>{
            //菜单对话框，最多可添加6个按钮
            promptAction.showActionMenu({
              title:"对话框菜单",
              buttons:[{
                text:"按钮一",
                color:"#0ff",
              },
                {
                  text:"按钮二",
                  color:"#f0f",
                },
                {
                  text:"按钮三",
                  color:"#f30",
                },
                {
                  text:"按钮四",
                  color:"#aaf",
                },
                {
                  text:"按钮五",
                  color:"#777",
                },
                {
                  text:"按钮六",
                  color:"#0f7",
                },]
            }).then(data=>{
              console.info("第"+(data.index+1)+"个按钮被点击了")
            })
          })

4.警告提示对话框

Button("警告提示对话框").width("60%").height(60).margin(10)
          .onClick(()=>{
            AlertDialog.show({
              title:"标题",//设置标题
              message:"内容",//设置内容
              autoCancel:true,//是否允许自动取消
              alignment:DialogAlignment.Bottom,//设置对话框显示的位置
              offset:{dx:0,dy:-20},//在对齐方式的条件下，设置水平和垂直方向的偏移量
              //x轴向右为正，y轴向下为正
              gridCount:3,//通过设置占用的栅格数设置对话框的宽度
              confirm:{//添加确定按钮
                value:"确定",
                action:()=>{
                  console.info("确定按钮被点击了")
                },
                backgroundColor:"#0ff",//添加按钮的背景颜色
                fontColor:"#f0f",//字体颜色
              },
              cancel:()=>{//当对话框被取消的时候触发
                console.info("对话框被取消了")
              }
            })
          })

 //警告提示对话框2
        Button("警告提示对话框2").width("60%").height(60).margin(10)
          .onClick(()=>{
            AlertDialog.show({
              title:"标题",//设置标题
              message:"内容",//设置内容
              autoCancel:true,//是否允许自动取消
              alignment:DialogAlignment.Bottom,//设置对话框显示的位置
              offset:{dx:0,dy:-20},//在对齐方式的条件下，设置水平和垂直方向的偏移量
              //x轴向右为正，y轴向下为正
              gridCount:3,//通过设置占用的栅格数设置对话框的宽度
              primaryButton:{
                value:"取消",
                action:()=>{
                  console.info("取消按钮被点击了")
                },
              },
              secondaryButton:{
                value:"确定",
                action:()=>{
                  console.info("确定按钮被点击了")
                }
              },
              cancel:()=>{//当对话框被取消的时候触发
                console.info("对话框被取消了")
              }
            })
          })

5.列表选择对话框

//列表选择对话框
        Button("列表选择对话框").width("60%").height(60).margin(10)
          .onClick(()=>{
            ActionSheet.show({
              title:"标题",
              message:"内容",
              autoCancel:true,
              alignment:DialogAlignment.Bottom,
              offset:{dx:0,dy:-20},
              sheets:[{
                title:"苹果",
                icon:$r("app.media.icon"),
                action:()=>{
                  console.info("苹果选项被点击了")
                }
              },
                {
                  title:"香蕉",
                  icon:$r("app.media.icon"),
                  action:()=>{
                    console.info("香蕉选项被点击了")
                  }
                },
                {
                  title:"西瓜",
                  icon:$r("app.media.icon"),
                  action:()=>{
                    console.info("西瓜选项被点击了")
                  }
                },],
              confirm:{
                value:"确定",
                action:()=>{
                  console.info("确定按钮被点击了")
                }
              },
              cancel:()=>{
                console.info("对话框被取消了")
              }
            })
          })

6.自定义对话框

import promptAction from '@ohos.promptAction'
 
//自定义对话框
@CustomDialog
struct Dialog1{
  //自定义对话框控制器
  controller:CustomDialogController
  cancel:()=>void //定义对话框被取消的事件
  confirm:()=>void //定义对话框被确定的事件
  build(){
    Column(){
      Text("标题").width("100%").height(60).backgroundColor("#600f")
        .fontColor(Color.White).fontWeight(FontWeight.Bold).fontSize(26)
        .textAlign(TextAlign.Center).letterSpacing(10)
      Text("我是自定义对话框的内容").width("100%").height(60).margin({left:10})
        .fontSize(24).fontColor(Color.Black)
      Row({space:10}){
        Button("取消").width("40%").backgroundColor(Color.Red)
          .fontColor(Color.White)
          .height(40).type(ButtonType.Normal).borderRadius(10)
          .onClick(()=>{
            this.controller.close()
            this.cancel()
          })
        Button("确定").width("40%").backgroundColor("#00f")
          .fontColor(Color.White)
          .height(40).type(ButtonType.Normal).borderRadius(10)
          .onClick(()=>{
            this.controller.close()
            this.confirm()
          })
      }
    }.width("100%").margin({bottom:10})
  }
}
 
@Entry
@Component
struct Index {
  //初始化自定义对话框的控制器
  dialogController:CustomDialogController=new CustomDialogController({
    //创建自定义对话框对象
    builder:Dialog1({
      //实现两个未实现的方法
      cancel:this.onCancel,
      confirm:this.onAccept,
    }),
    autoCancel:true,
    alignment:DialogAlignment.Bottom,
  })
  //定义两个方法
  onCancel(){
    console.info("自定义对话框被取消了")
  }
  onAccept(){
    console.info("自定义对话框被确定了")
  }
  //文本提示对话框
  build() {
    Scroll(){
      Column() {
       
        Button("自定义对话框").width("60%").height(60).margin(10)
          .onClick(()=>{
            //通过控制器打开自定义对话框   关闭调用close方法
            this.dialogController.open()
          })
        
      }
      .width('100%')
    }
  }
}

7.日期对话框

//日期对话框
        Button("日期对话框").width("60%").height(60).margin(10)
          .onClick(()=>{
            //创建日期对话框
            DatePickerDialog.show({
              start:new Date("2000-1-1"), //设置开始的日期
              end:new Date("2100-1-1"),//设置结束的日期
              selected:this.currentDate,//设置当前选中的日期为现在的日期
              // lunar:true,//允许月份和天数显示为中文
              onAccept:(value:DatePickerResult)=>{
                //保存当前这一次用户选中的日期，用户下一次打开对话框时，显示上一次选中的日期
                    this.currentDate.setFullYear(value.year,value.month,value.day)
                console.info(JSON.stringify(value))
              },
              onCancel:()=>{
                console.info("日期对话框被取消了")
              },
              onChange:(value:DatePickerResult)=>{
                console.info("用户正在更改日期"+JSON.stringify(value))
              }
            })
          })

8.时间对话框

//时间对话框
        Button("时间对话框").width("60%").height(60).margin(10)
          .onClick(()=>{
            TimePickerDialog.show({
                //设置当前的时间
              selected:this.currentDate,
              useMilitaryTime:true,//是否使用24小时制
              //选中事件
              onAccept:(value:TimePickerResult)=>{
                this.currentDate.setHours(value.hour,value.minute)
                console.info(JSON.stringify(value))
              },
              //取消事件
              onCancel:()=>{
                console.info("时间对话框被取消了")
              },
              //改变事件
              onChange:(value:TimePickerResult)=>{
                console.info(JSON.stringify(value))
              },
            })
          })

9.文本列表对话框

//文本列表对话框
        Button("文本列表对话框").width("60%").height(60).margin(10)
          .onClick(()=>{
              TextPickerDialog.show({
                range:this.texts,//添加数据信息
                selected:2,//默认选中第几项，默认第0项开始
                onAccept:(value:TextPickerResult)=>{
                  promptAction.showToast({message:"下标为:"+value.index+"的"+value.value+"被选中了"})
                },
                onCancel:()=>{
                  promptAction.showToast({message:"对话框取消了"})
                },
                onChange:(value:TextPickerResult)=>{
                  console.info(JSON.stringify(value))
                }
              })
          })