通过CustomDialogController类显示自定义弹窗。自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作,使用弹窗组件时,可优先考虑自定义弹窗,便于自定义弹窗的样式与内容。
目录
1.使用@CustomDialog装饰器装饰自定义弹窗,可在此装饰器内自定义弹窗内容。
2.1在@CustomDialog装饰器内添加按钮,同时添加数据函数。
2.2页面内需要在构造器内进行接收,同时创建相应的函数操作。
1.使用@CustomDialog装饰器装饰自定义弹窗,可在此装饰器内自定义弹窗内容。
2.1在@CustomDialog装饰器内添加按钮,同时添加数据函数。
2.2页面内需要在构造器内进行接收,同时创建相应的函数操作。
接口
constructor(value: CustomDialogControllerOptions)
- 创建弹窗
1.使用@CustomDialog装饰器装饰自定义弹窗,可在此装饰器内自定义弹窗内容。
@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({}),
})
build() {
Column() {
Text('我是内容')
.fontSize(20)
.margin({ top: 10, bottom: 10 })
}
}
}
2.创建构造器,与装饰器呼应相连。
@Entry
@Component
struct CustomDialogUser {
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(),
})
}
1.1组件解释
builder: CustomDialogExample({})为指定哪个自定义窗口
CustomDialogExample的参数为自定义窗口的参数
1.2CustomDialogController参数详解
接口函数原型:
CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})
1.2.1参数如下:
下面参数分别是参数名,参数类型,是否必填,参数作用
1、builder,CustomDialog,是,自定义弹窗内容构造器。
2、cancel,() => void,否,点击遮障层退出时的回调。
3、autoCancel,boolean,否,是否允许点击遮障层退出。默认值:true
4、alignment,DialogAlignment,否,弹窗在竖直方向上的对齐方式。默认值:DialogAlignment.Default
5、offset,Offset,否,弹窗相对alignment所在位置的偏移量。
6、customStyle,boolean,否,弹窗容器样式是否自定义。默认值:false,弹窗容器的宽度根据栅格系统自适应,不跟随子节点;高度自适应子节点,最大为窗口高度的90%;圆角为24vp。
7、gridCount,number,否,弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应,异常值按默认值处理,最大栅格数为系统最大栅格数。
1.3函数介绍
1.3.1open()
函数原型如下:
open(): void
1.3.2close()
函数原型如下
close(): void
- 关闭显示的自定义弹窗,若已关闭,则不生效。
- 显示自定义弹窗内容,允许多次使用,但如果弹框为SubWindow模式,则该弹框不允许再弹出SubWindow弹框。
3.点击与onClick事件绑定的组件使弹窗弹出。
@Entry
@Component
struct CustomDialogUser {
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(),
})
build() {
Column() {