鸿蒙通用组件弹窗简介

• 弹窗----Toast
• • 引入@ohos.promptAction模块
  • 通过点击按钮，模拟弹窗
• 警告对话框----AlertDialog
• 列表弹窗----ActionSheet
• 选择器弹窗
• 自定义弹窗
• • 使用@CustomDialog声明一个自定义弹窗
  • 在需要使用的地方声明
  • 自定义弹窗，完整代码

弹窗----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()     })   } }