codecamp

自定义弹窗

通过CustomDialogController类显示自定义弹窗。使用弹窗组件时,可优先考虑自定义弹窗,便于自定义弹窗的样式与内容。

说明

从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

接口

CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})

说明

自定义弹窗的所有参数,不支持动态刷新。

参数:

参数名

参数类型

必填

参数描述

builder

CustomDialog

自定义弹窗内容构造器。

cancel

() => void

点击遮障层退出时的回调。

autoCancel

boolean

是否允许点击遮障层退出。

默认值:true

alignment

DialogAlignment

弹窗在竖直方向上的对齐方式。

默认值:DialogAlignment.Default

offset

Offset

弹窗相对alignment所在位置的偏移量。

customStyle

boolean

弹窗容器样式是否自定义。

默认值:false,弹窗容器的宽度根据栅格系统自适应,不跟随子节点;高度自适应子节点,最大为窗口高度的90%;圆角为24vp。

gridCount8+

number

弹窗宽度占栅格宽度的个数。

默认为按照窗口大小自适应,异常值按默认值处理,最大栅格数为系统最大栅格数。

CustomDialogController

导入对象

  1. dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
说明

CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量,且在@Component struct内部定义时赋值才有效,具体用法可看下方示例。

open()

open(): void

显示自定义弹窗内容,允许多次使用,但如果弹框为SubWindow模式,则该弹框不允许再弹出SubWindow弹框。

close

close(): void

关闭显示的自定义弹窗,若已关闭,则不生效。

示例

  1. // xxx.ets
  2. @CustomDialog
  3. struct CustomDialogExample {
  4. @Link textValue: string
  5. @Link inputValue: string
  6. controller: CustomDialogController
  7. // 若尝试在CustomDialog中传入多个其他的Controller,以实现在CustomDialog中打开另一个或另一些CustomDialog,那么此处需要将指向自己的controller放在最后
  8. cancel: () => void
  9. confirm: () => void
  10. build() {
  11. Column() {
  12. Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
  13. TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
  14. .onChange((value: string) => {
  15. this.textValue = value
  16. })
  17. Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
  18. Flex({ justifyContent: FlexAlign.SpaceAround }) {
  19. Button('cancel')
  20. .onClick(() => {
  21. this.controller.close()
  22. this.cancel()
  23. }).backgroundColor(0xffffff).fontColor(Color.Black)
  24. Button('confirm')
  25. .onClick(() => {
  26. this.inputValue = this.textValue
  27. this.controller.close()
  28. this.confirm()
  29. }).backgroundColor(0xffffff).fontColor(Color.Red)
  30. }.margin({ bottom: 10 })
  31. }
  32. // dialog默认的borderRadius为24vp,如果需要使用border属性,请和borderRadius属性一起使用。
  33. }
  34. }
  35. @Entry
  36. @Component
  37. struct CustomDialogUser {
  38. @State textValue: string = ''
  39. @State inputValue: string = 'click me'
  40. dialogController: CustomDialogController = new CustomDialogController({
  41. builder: CustomDialogExample({
  42. cancel: this.onCancel,
  43. confirm: this.onAccept,
  44. textValue: $textValue,
  45. inputValue: $inputValue
  46. }),
  47. cancel: this.existApp,
  48. autoCancel: true,
  49. alignment: DialogAlignment.Bottom,
  50. offset: { dx: 0, dy: -20 },
  51. gridCount: 4,
  52. customStyle: false
  53. })
  54. // 在自定义组件即将析构销毁时将dialogController置空
  55. aboutToDisappear() {
  56. this.dialogController = undefined // 将dialogController置空
  57. }
  58. onCancel() {
  59. console.info('Callback when the first button is clicked')
  60. }
  61. onAccept() {
  62. console.info('Callback when the second button is clicked')
  63. }
  64. existApp() {
  65. console.info('Click the callback in the blank area')
  66. }
  67. build() {
  68. Column() {
  69. Button(this.inputValue)
  70. .onClick(() => {
  71. if (this.dialogController != undefined) {
  72. this.dialogController.open()
  73. }
  74. }).backgroundColor(0x317aff)
  75. }.width('100%').margin({ top: 5 })
  76. }
  77. }

列表选择弹窗
日期滑动选择器弹窗
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }