鸿蒙通用组件弹窗简介

弹窗----Toast

引入@ohos.promptAction模块

import promptAction from '@ohos.promptAction'

通过点击按钮，模拟弹窗

Button('点击')
  .width('60%')
  .height(50)
  .onClick(()=>{
    promptAction.showToast({
      message:'点击了按钮', // 展示的文字
      duration:2000, // 停留时长
      bottom: 100 // 距离底部多远
    })
  })

警告对话框----AlertDialog

AlertDialog用于向用户提出告警或者确认的对话框。

AlertDialog.show({
  title:'提示信息',
  message:'此信息比较重要，请确认!!!',
  autoCancel: true, //点击遮障层时，是否关闭弹窗
  alignment: DialogAlignment.Bottom, //弹窗位置
  offset: { dx: 0, dy: -30 }, //相对于弹窗位置的偏移量
  primaryButton: { //主要按钮
    value: '确认', //按钮内容
    fontColor: Color.Red, //字体颜色
    action: () => { //点击回调
      console.log('点击了确认按钮')
    }
  },
  secondaryButton: { //次要按钮
    value: '取消',
    action: () => {
      console.log('点击了取消按钮')
    }
  },
  cancel: () => { //点击遮罩层取消时的回调
    console.info('点击遮罩层取消时的回调')
  }
})

列表弹窗----ActionSheet

ActionSheet用于给用户一组列表弹窗，等用户选择后再作处理。

ActionSheet.show({
title:'提示信息',
message: '此信息比较重要，请确认!!!',
autoCancel: true, //点击遮障层时，是否关闭弹窗
alignment: DialogAlignment.Center, //弹窗位置
offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量
confirm: { //底部按钮
    value: '取消', //按钮文本内容
    action: () => { //按钮回调函数
    console.log('点击按钮取消')
    }
},
cancel: () => { //点击遮障层关闭弹窗时的回调
    console.log('点击遮障层取消')
},
sheets:[
    {
    title:'操作1',
    action: () => {
        console.log('操作1')
    }
    },
    {
    title:'操作2',
    action: () => {
        console.log('操作2')
    }
    },
    {
    title:'操作3',
    action: () => {
        console.log('操作3')
    }
    },
]
})

alignment的几种位置：

DialogAlignment.Top 上部
DialogAlignment.Center 中间
DialogAlignment.Bottom 底部
DialogAlignment.TopStart 左上部
DialogAlignment.TopEnd 右上部
DialogAlignment.CenterStart 中间左边
DialogAlignment.CenterEnd 中间右边
DialogAlignment.BottomStart 左下部
DialogAlignment.BottomEnd 右下部

选择器弹窗

鸿蒙API中有很多选择器弹窗，比如时间、日期、文本等，这里就不做介绍。

自定义弹窗

在实际使用过程中，一定会遇到官方提供的弹窗不能满足需要的情况，这时候就需要尽心自定义。

这里举一个自定义弹窗的简单例子

使用@CustomDialog声明一个自定义弹窗

@CustomDialog
struct CustomDialogText{
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogText() })

  build(){
    Column({space: 20}){
      Text('内容1')
      Text('内容2')
      Text('内容3')
    }
      .margin(20)
    .onClick(()=>{
      this.controller.close()
    })
  }
}

在build里面定义UI样式，这里只做为展示，随便定义了几个展示的文本内容

在需要使用的地方声明

在使用过程中，需要需要初始化CustomDialogController。

controller: CustomDialogController = new CustomDialogController({
  builder: CustomDialogText(),// builder就是自定义的弹窗
  alignment: DialogAlignment.Center, // 弹窗弹出位置
  offset:{dx: 0, dy: -10} // 弹窗弹出后的偏移量，按需要进行设置
})

定义好controller之后，在使用的时候，直接调用this.controller.open()。

自定义弹窗，完整代码

@Entry
@Component
struct CommentTest{
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogText(),
    alignment: DialogAlignment.Center,
    offset:{dx: 0, dy: -10}
  })
  build(){
    Column({space: 20}){
      Button('点击弹出自定义弹窗')
        .width('60%')
        .height(50)
        .onClick(()=>{
          this.controller.open()
        })

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@CustomDialog
struct CustomDialogText{
  controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogText() })

  build(){
    Column({space: 20}){
      Text('内容1')
      Text('内容2')
      Text('内容3')
    }
      .margin(20)
    .onClick(()=>{
      this.controller.close()
    })
  }
}