HarmonyOS应用开发-自定义弹窗

通过CustomDialogController类显示自定义弹窗。自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作,使用弹窗组件时,可优先考虑自定义弹窗,便于自定义弹窗的样式与内容。

目录

接口

 1.使用@CustomDialog装饰器装饰自定义弹窗,可在此装饰器内自定义弹窗内容。

2.创建构造器,与装饰器呼应相连。

1.1组件解释

1.2CustomDialogController参数详解

1.2.1参数如下:

1.3函数介绍

1.3.1open()

1.3.2close()

3.点击与onClick事件绑定的组件使弹窗弹出。

二,弹窗的交互

2.1在@CustomDialog装饰器内添加按钮,同时添加数据函数。

2.2页面内需要在构造器内进行接收,同时创建相应的函数操作。

三,自定义弹窗样式案例

预期效果图:

2.页面交互:

样例代码:

效果图:

鸿蒙应用开发-自定义弹窗

接口

 1.使用@CustomDialog装饰器装饰自定义弹窗,可在此装饰器内自定义弹窗内容。

2.创建构造器,与装饰器呼应相连。

1.1组件解释

1.2CustomDialogController参数详解

1.2.1参数如下:

1.3函数介绍

1.3.1open()

1.3.2close()

3.点击与onClick事件绑定的组件使弹窗弹出。

二,弹窗的交互

2.1在@CustomDialog装饰器内添加按钮,同时添加数据函数。

2.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
  1. 关闭显示的自定义弹窗,若已关闭,则不生效。
  2. 显示自定义弹窗内容,允许多次使用,但如果弹框为SubWindow模式,则该弹框不允许再弹出SubWindow弹框。

3.点击与onClick事件绑定的组件使弹窗弹出。

@Entry

@Component

struct CustomDialogUser {

  dialogController: CustomDialogController = new CustomDialogController({

    builder: CustomDialogExample(),

  })



  build() {

    Column() {

   

猜你喜欢

转载自blog.csdn.net/2302_80840424/article/details/144232242
今日推荐