鸿蒙OpenHarmony【自定义弹窗 (CustomDialog)】弹窗

莱莱  金牌会员 | 2025-2-14 17:41:03 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 988|帖子 988|积分 2964

通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，可优先思量自定义弹窗，便于自定义弹窗的样式与内容。
阐明
从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
接口

constructor(value: CustomDialogControllerOptions)
设置自定义弹窗的参数。
阐明
自定义弹窗的全部参数，不支持动态刷新。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明value[CustomDialogControllerOptions]是设置自定义弹窗的参数。 CustomDialogControllerOptions对象阐明

体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填阐明builder[CustomDialog]是自定义弹窗内容构造器。**阐明：**若builder构造器使用回调函数作为入参，请注意使用this绑定题目，如build: custombuilder({ callback: ()=> {…}})。若在builder构造器中监听数据变化请使用@Link，其他方式如@Prop、@ObjectLink不实用此场景。元服务API： 从API version 11开始，该接口支持在元服务中使用。cancel() => void否返回、ESC键和点击遮障层弹窗退出时的回调。元服务API： 从API version 11开始，该接口支持在元服务中使用。autoCancelboolean否是否答应点击遮障层退出，true表现关闭弹窗。false表现不关闭弹窗。默认值：true元服务API： 从API version 11开始，该接口支持在元服务中使用。alignment[DialogAlignment]否弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default元服务API： 从API version 11开始，该接口支持在元服务中使用。offset[Offset]否弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0, dy: 0 }元服务API： 从API version 11开始，该接口支持在元服务中使用。customStyleboolean否弹窗容器样式是否自定义。设置false时（默认值）：1、圆角为32vp。2、未设置弹窗宽度高度：弹窗容器的宽度根据栅格体系自适应。高度自适应自定义的内容节点。3、设置弹窗宽度高度：弹窗容器的宽度不凌驾默认样式下的最大宽度（自定义节点设置100%的宽度），弹窗容器的高度不凌驾默认样式下的最大高度（自定义节点设置100%的高度）。设置为true：1、圆角为0，弹窗配景色为透明色。2、不支持设置弹窗宽度、高度、边框宽度、边框样式、边框颜色以及阴影宽度。元服务API： 从API version 11开始，该接口支持在元服务中使用。gridCount8+number否弹窗宽度占[栅格宽度]的个数。默以为按照窗口大小自适应，非常值按默认值处置惩罚，最大栅格数为体系最大栅格数。元服务API： 从API version 11开始，该接口支持在元服务中使用。maskColor10+[ResourceColor]否自定义蒙层颜色。默认值: 0x33000000元服务API： 从API version 11开始，该接口支持在元服务中使用。maskRect10+[Rectangle]否弹窗遮蔽层地区，在遮蔽层地区内的变乱不透传，在遮蔽层地区外的变乱透传。默认值：{ x: 0, y: 0, width: ‘100%’, height: ‘100%’ }**阐明：**showInSubWindow为true时，maskRect不生效。元服务API： 从API version 11开始，该接口支持在元服务中使用。openAnimation10+[AnimateParam]否自定义设置弹窗弹出的动画效果相干参数。阐明：tempo默认值为1，当设置小于等于0的值时按默认值处置惩罚。iterations默认值为1，默认播放一次，设置为其他数值时按默认值处置惩罚。playMode控制动画播放模式，默认值为PlayMode.Normal，设置为其他数值时按照默认值处置惩罚。元服务API： 从API version 11开始，该接口支持在元服务中使用。closeAnimation10+[AnimateParam]否自定义设置弹窗关闭的动画效果相干参数。阐明：tempo默认值为1，当设置小于等于0的值时按默认值处置惩罚。iterations默认值为1，默认播放一次，设置为其他数值时按默认值处置惩罚。playMode控制动画播放模式，默认值为PlayMode.Normal，设置为其他数值时按照默认值处置惩罚。页面转场切换时，建议使用默认关闭动效。元服务API： 从API version 11开始，该接口支持在元服务中使用。showInSubWindow10+boolean否某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。默认值：false，弹窗显示在应用内，而非独立子窗口。阐明：showInSubWindow为true的弹窗无法触发显示另一个showInSubWindow为true的弹窗。不建议在showInSubWindow为true的弹窗中使用CalendarPicker、CalendarPickerDialog、DatePickerDialog、TextPickerDialog、TimePickerDialog组件，弹窗会影响上述组件举动。元服务API： 从API version 11开始，该接口支持在元服务中使用。backgroundColor10+[ResourceColor]否设置弹窗背板添补。默认值：Color.Transparent阐明： 如果同时设置了内容构造器的配景色，则backgroundColor会被内容构造器的配景色覆盖。当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。元服务API： 从API version 11开始，该接口支持在元服务中使用。cornerRadius10+[BorderRadiuses][Dimension]否isModal11+boolean否弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层。默认值：true，此时弹窗有蒙层。元服务API： 从API version 12开始，该接口支持在元服务中使用。onWillDismiss12+Callback<[DismissDialogAction]>否交互式关闭回调函数。**阐明：**1.当用户执行点击遮障层关闭、左滑/右滑、三键back、键盘ESC关闭交互操纵时，如果注册该回调函数，则不会立即关闭弹窗。在回调函数中可以通过reason得到拦阻关闭弹窗的操纵类型，从而根据缘故因由选择是否能关闭弹窗。当前组件返回的reason中，暂不支持CLOSE_BUTTON的枚举值。2.在onWillDismiss回调中，不能再做onWillDismiss拦截。元服务API： 从API version 12开始，该接口支持在元服务中使用。borderWidth12+[Dimension][EdgeWidths]否borderColor12+[ResourceColor][EdgeColors]否borderStyle12+[BorderStyle][EdgeStyles]否width12+[Dimension]否设置弹窗背板的宽度。阐明：- 弹窗宽度默认最大值：400vp。- 百分比参数方式：弹窗参考宽度为所在窗口的宽度，在此基础上调小或调大。元服务API： 从API version 12开始，该接口支持在元服务中使用。height12+[Dimension]否设置弹窗背板的高度。阐明：- 弹窗高度默认最大值：0.9 *（窗口高度 - 安全地区）。- 百分比参数方式：弹窗参考高度为（窗口高度 - 安全地区），在此基础上调小或调大。元服务API： 从API version 12开始，该接口支持在元服务中使用。shadow12+[ShadowOptions][ShadowStyle]否backgroundBlurStyle12+[BlurStyle]否弹窗背板含糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK**阐明：**设置为BlurStyle.NONE即可关闭配景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色显示将不符合预期效果。元服务API： 从API version 12开始，该接口支持在元服务中使用。keyboardAvoidMode12+[KeyboardAvoidMode]否用于设置弹窗是否在拉起软键盘时举行主动避让。默认值：KeyboardAvoidMode.DEFAULT元服务API： 从API version 12开始，该接口支持在元服务中使用。 阐明


  • 按下返回键和ESC键时会让弹窗退出。
  • 弹窗在避让软键盘时到达极限高度之后会压缩高度。
    需要注意：高度压缩生效在外层容器上，如果容器根节点中的子组件设置了较大的固定高度，由于容器默认不裁剪，依然大概存在超出屏幕显示的情况。
  • 自定义弹窗仅实用于简单提示场景，不能替代页面使用。弹窗避让软键盘时，与软键盘之间存在16vp的安全间距。
  • 当前，ArkUI弹窗均为非页面级弹窗，在页面路由跳转时，如果开发者未调用close方法将其关闭，弹窗将不会主动关闭。若需实如今跳转页面时弹窗同步关闭的场景，建议使用Navigation。
DismissDialogAction12+

Dialog关闭的信息。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
属性

名称类型可读可写阐明dismissCallback否否Dialog关闭回调函数。开发者需要退出时调用，不需要退出时无需调用。reason[DismissReason]否否Dialog无法关闭缘故因由。根据开发者需要选择差别操纵下，Dialog是否需要关闭。 CustomDialogController

元服务API： 从API version 11开始，该接口支持在元服务中使用。
导入对象

  1. dialogController : CustomDialogController | null = new CustomDialogController(CustomDialogControllerOptions)
复制代码
阐明：CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效，具体用法可看下方示例。
open

open()
显示自定义弹窗内容，允很多次使用，但如果弹框为SubWindow模式，则该弹框不答应再弹出SubWindow弹框。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
close

close()
元服务API： 从API version 11开始，该接口支持在元服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
关闭显示的自定义弹窗，若已关闭，则不生效。
示例

示例1

  1. // xxx.ets
  2. @CustomDialog
  3. struct CustomDialogExampleTwo {
  4.   controllerTwo?: CustomDialogController
  5.   build() {
  6.     Column() {
  7.       Text('我是第二个弹窗')
  8.         .fontSize(30)
  9.         .height(100)
  10.       Button('点我关闭第二个弹窗')
  11.         .onClick(() => {
  12.           if (this.controllerTwo != undefined) {
  13.             this.controllerTwo.close()
  14.           }
  15.         })
  16.         .margin(20)
  17.     }
  18.   }
  19. }
  20. @CustomDialog
  21. @Component
  22. struct CustomDialogExample {
  23.   @Link textValue: string
  24.   @Link inputValue: string
  25.   dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
  26.     builder: CustomDialogExampleTwo(),
  27.     alignment: DialogAlignment.Bottom,
  28.     onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
  29.       console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
  30.       console.log("dialog onWillDismiss")
  31.       if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
  32.         dismissDialogAction.dismiss()
  33.       }
  34.       if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
  35.         dismissDialogAction.dismiss()
  36.       }
  37.     },
  38.     offset: { dx: 0, dy: -25 } })
  39.   controller?: CustomDialogController
  40.   // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在所有controller的后面
  41.   cancel: () => void = () => {
  42.   }
  43.   confirm: () => void = () => {
  44.   }
  46.   build() {
  47.     Column() {
  48.       Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
  49.       TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
  50.         .onChange((value: string) => {
  51.           this.textValue = value
  52.         })
  53.       Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
  54.       Flex({ justifyContent: FlexAlign.SpaceAround }) {
  55.         Button('cancel')
  56.           .onClick(() => {
  57.             if (this.controller != undefined) {
  58.               this.controller.close()
  59.               this.cancel()
  60.             }
  61.           }).backgroundColor(0xffffff).fontColor(Color.Black)
  62.         Button('confirm')
  63.           .onClick(() => {
  64.             if (this.controller != undefined) {
  65.               this.inputValue = this.textValue
  66.               this.controller.close()
  67.               this.confirm()
  68.             }
  69.           }).backgroundColor(0xffffff).fontColor(Color.Red)
  70.       }.margin({ bottom: 10 })
  72.       Button('点我打开第二个弹窗')
  73.         .onClick(() => {
  74.           if (this.dialogControllerTwo != null) {
  75.             this.dialogControllerTwo.open()
  76.           }
  77.         })
  78.         .margin(20)
  79.     }.borderRadius(10)
  80.     // 如果需要使用border属性或cornerRadius属性，请和borderRadius属性一起使用。
  81.   }
  82. }
  83. @Entry
  84. @Component
  85. struct CustomDialogUser {
  86.   @State textValue: string = ''
  87.   @State inputValue: string = 'click me'
  88.   dialogController: CustomDialogController | null = new CustomDialogController({
  89.     builder: CustomDialogExample({
  90.       cancel: ()=> { this.onCancel() },
  91.       confirm: ()=> { this.onAccept() },
  92.       textValue: $textValue,
  93.       inputValue: $inputValue
  94.     }),
  95.     cancel: this.exitApp,
  96.     autoCancel: true,
  97.     onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
  98.       console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
  99.       console.log("dialog onWillDismiss")
  100.       if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
  101.         dismissDialogAction.dismiss()
  102.       }
  103.       if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
  104.         dismissDialogAction.dismiss()
  105.       }
  106.     },
  107.     alignment: DialogAlignment.Bottom,
  108.     offset: { dx: 0, dy: -20 },
  109.     gridCount: 4,
  110.     customStyle: false,
  111.     cornerRadius: 10,
  112.   })
  114.   // 在自定义组件即将析构销毁时将dialogController置空
  115.   aboutToDisappear() {
  116.     this.dialogController = null // 将dialogController置空
  117.   }
  119.   onCancel() {
  120.     console.info('Callback when the first button is clicked')
  121.   }
  123.   onAccept() {
  124.     console.info('Callback when the second button is clicked')
  125.   }
  127.   exitApp() {
  128.     console.info('Click the callback in the blank area')
  129.   }
  130.   build() {
  131.     Column() {
  132.       Button(this.inputValue)
  133.         .onClick(() => {
  134.           if (this.dialogController != null) {
  135.             this.dialogController.open()
  136.           }
  137.         }).backgroundColor(0x317aff)
  138.     }.width('100%').margin({ top: 5 })
  139.   }
  140. }
复制代码

示例2

  1. // xxx.ets
  2. @CustomDialog
  3. struct CustomDialogExample {
  4.   controller?: CustomDialogController
  5.   cancel: () => void = () => {
  6.   }
  7.   confirm: () => void = () => {
  8.   }
  9.   build() {
  10.     Column() {
  11.       Text('可展示在主窗口外的弹窗')
  12.         .fontSize(30)
  13.         .height(100)
  14.       Button('点我关闭弹窗')
  15.         .onClick(() => {
  16.           if (this.controller != undefined) {
  17.             this.controller.close()
  18.           }
  19.         })
  20.         .margin(20)
  21.     }
  22.   }
  23. }
  24. @Entry
  25. @Component
  26. struct CustomDialogUser {
  27.   dialogController: CustomDialogController | null = new CustomDialogController({
  28.     builder: CustomDialogExample({
  29.       cancel: ()=> { this.onCancel() },
  30.       confirm: ()=> { this.onAccept() }
  31.     }),
  32.     cancel: this.existApp,
  33.     autoCancel: true,
  34.     onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
  35.       console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
  36.       console.log("dialog onWillDismiss")
  37.       if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
  38.         dismissDialogAction.dismiss()
  39.       }
  40.       if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
  41.         dismissDialogAction.dismiss()
  42.       }
  43.     },
  44.     alignment: DialogAlignment.Center,
  45.     offset: { dx: 0, dy: -20 },
  46.     gridCount: 4,
  47.     showInSubWindow: true,
  48.     isModal: true,
  49.     customStyle: false,
  50.     cornerRadius: 10,
  51.   })
  52.   // 在自定义组件即将析构销毁时将dialogController置空
  53.   aboutToDisappear() {
  54.     this.dialogController = null // 将dialogController置空
  55.   }
  57.   onCancel() {
  58.     console.info('Callback when the first button is clicked')
  59.   }
  61.   onAccept() {
  62.     console.info('Callback when the second button is clicked')
  63.   }
  65.   existApp() {
  66.     console.info('Click the callback in the blank area')
  67.   }
  69.   build() {
  70.     Column() {
  71.       Button('click me')
  72.         .onClick(() => {
  73.           if (this.dialogController != null) {
  74.             this.dialogController.open()
  75.           }
  76.         }).backgroundColor(0x317aff)
  77.     }.width('100%').margin({ top: 5 })
  78.   }
  79. }
复制代码

示例3

该示例定义了CustomDialog的样式，如宽度、高度、配景色、阴影等等
  1. // xxx.ets
  2. @CustomDialog
  3. struct CustomDialogExample {
  4.   controller?: CustomDialogController
  5.   cancel: () => void = () => {
  6.   }
  7.   confirm: () => void = () => {
  8.   }
  9.   build() {
  10.     Column() {
  11.       Text('这是自定义弹窗')
  12.         .fontSize(30)
  13.         .height(100)
  14.       Button('点我关闭弹窗')
  15.         .onClick(() => {
  16.           if (this.controller != undefined) {
  17.             this.controller.close()
  18.           }
  19.         })
  20.         .margin(20)
  21.     }
  22.   }
  23. }
  24. @Entry
  25. @Component
  26. struct CustomDialogUser {
  27.   dialogController: CustomDialogController | null = new CustomDialogController({
  28.     builder: CustomDialogExample({
  29.       cancel: ()=> { this.onCancel() },
  30.       confirm: ()=> { this.onAccept() }
  31.     }),
  32.     cancel: this.existApp,
  33.     autoCancel: true,
  34.     onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
  35.       console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
  36.       console.log("dialog onWillDismiss")
  37.       if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
  38.         dismissDialogAction.dismiss()
  39.       }
  40.       if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
  41.         dismissDialogAction.dismiss()
  42.       }
  43.     },
  44.     alignment: DialogAlignment.Center,
  45.     offset: { dx: 0, dy: -20 },
  46.     customStyle: false,
  47.     cornerRadius: 20,
  48.     width: 300,
  49.     height: 200,
  50.     borderWidth: 1,
  51.     borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
  52.     borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
  53.     backgroundColor: Color.White,
  54.     shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
  55.   })
  56.   // 在自定义组件即将析构销毁时将dialogController置空
  57.   aboutToDisappear() {
  58.     this.dialogController = null // 将dialogController置空
  59.   }
  61.   onCancel() {
  62.     console.info('Callback when the first button is clicked')
  63.   }
  65.   onAccept() {
  66.     console.info('Callback when the second button is clicked')
  67.   }
  69.   existApp() {
  70.     console.info('Click the callback in the blank area')
  71.   }
  73.   build() {
  74.     Column() {
  75.       Button('click me')
  76.         .onClick(() => {
  77.           if (this.dialogController != null) {
  78.             this.dialogController.open()
  79.           }
  80.         }).backgroundColor(0x317aff)
  81.     }.width('100%').margin({ top: 5 })
  82.   }
  83. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

莱莱

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表