自定义弹窗(CustomDialog)

2024-01-25 13:16 更新

自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗

创建自定义弹窗

  1. 使用@CustomDialog装饰器装饰自定义弹窗。
  2. @CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。

    1. @CustomDialog
    2. struct CustomDialogExample {
    3. controller: CustomDialogController
    4. build() {
    5. Column() {
    6. Text('我是内容')
    7. .fontSize(20)
    8. .margin({ top: 10, bottom: 10 })
    9. }
    10. }
    11. }

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

    1. dialogController: CustomDialogController = new CustomDialogController({
    2. builder: CustomDialogExample({}),
    3. })

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

    1. Flex({justifyContent:FlexAlign.Center}){
    2. Button('click me')
    3. .onClick(() => {
    4. this.dialogController.open()
    5. })
    6. }.width('100%')

弹窗的交互

弹窗可用于数据交互,完成用户一系列响应操作。

  1. 在@CustomDialog装饰器内添加按钮操作,同时添加数据函数的创建。

    1. @CustomDialog
    2. struct CustomDialogExample {
    3. controller: CustomDialogController
    4. cancel: () => void
    5. confirm: () => void
    6. build() {
    7. Column() {
    8. Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
    9. Flex({ justifyContent: FlexAlign.SpaceAround }) {
    10. Button('cancel')
    11. .onClick(() => {
    12. this.controller.close()
    13. this.cancel()
    14. }).backgroundColor(0xffffff).fontColor(Color.Black)
    15. Button('confirm')
    16. .onClick(() => {
    17. this.controller.close()
    18. this.confirm()
    19. }).backgroundColor(0xffffff).fontColor(Color.Red)
    20. }.margin({ bottom: 10 })
    21. }
    22. }
    23. }

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

    1. dialogController: CustomDialogController = new CustomDialogController({
    2. builder: CustomDialogExample({
    3. cancel: this.onCancel,
    4. confirm: this.onAccept,
    5. }),
    6. alignment: DialogAlignment.Default, // 可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示
    7. })
    8. onCancel() {
    9. console.info('Callback when the first button is clicked')
    10. }
    11. onAccept() {
    12. console.info('Callback when the second button is clicked')
    13. }

完整示例

  1. // xxx.ets
  2. @CustomDialog
  3. struct CustomDialogExample {
  4. controller: CustomDialogController
  5. cancel: () => void
  6. confirm: () => void
  7. build() {
  8. Column() {
  9. Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
  10. Flex({ justifyContent: FlexAlign.SpaceAround }) {
  11. Button('cancel')
  12. .onClick(() => {
  13. this.controller.close()
  14. this.cancel()
  15. }).backgroundColor(0xffffff).fontColor(Color.Black)
  16. Button('confirm')
  17. .onClick(() => {
  18. this.controller.close()
  19. this.confirm()
  20. }).backgroundColor(0xffffff).fontColor(Color.Red)
  21. }.margin({ bottom: 10 })
  22. }
  23. }
  24. }
  25. @Entry
  26. @Component
  27. struct DialogExample {
  28. dialogController: CustomDialogController = new CustomDialogController({
  29. builder: CustomDialogExample({
  30. cancel: this.onCancel,
  31. confirm: this.onAccept,
  32. }),
  33. alignment: DialogAlignment.Default, // 可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示
  34. })
  35. onCancel() {
  36. console.info('Callback when the first button is clicked')
  37. }
  38. onAccept() {
  39. console.info('Callback when the second button is clicked')
  40. }
  41. build() {
  42. Flex({ justifyContent: FlexAlign.Center }) {
  43. Button('click me')
  44. .onClick(() => {
  45. this.dialogController.open()
  46. })
  47. }.width('100%')
  48. }
  49. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号