鸿蒙通用组件弹窗简介

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