鸿蒙5.0开发进阶：UI框架-自定义弹窗 (CustomDialog)

最新推荐文章于 2025-01-07 15:04:40 发布
原创 最新推荐文章于 2025-01-07 15:04:40 发布 · 1.1k 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #鸿蒙 #前端 #android #ui

往期鸿蒙全套实战文章必看：

自定义弹窗 (CustomDialog)

CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。

创建自定义弹窗

  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(),
   })
 }

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

    @Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
  })

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}

弹窗的交互

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

  1. 在@CustomDialog装饰器内添加按钮，同时添加数据函数。

    @CustomDialog
struct CustomDialogExample {
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController

  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

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

    @Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: ()=> { this.onCancel() },
      confirm: ()=> { this.onAccept() },
    }),
  })

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%').margin({ top: 5 })
  }
}

    3.可通过弹窗中的按钮实现路由跳转，同时获取跳转页面向当前页传入的参数。

    // Index.ets
@CustomDialog
struct CustomDialogExample {
  @Link textValue: string
  controller?: CustomDialogController
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }

  build() {
    Column({ space: 20 }) {
      if (this.textValue != '') {
        Text(`第二个页面的内容为：${this.textValue}`)
          .fontSize(20)
      } else {
        Text('是否获取第二个页面的内容')
          .fontSize(20)
      }
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            if (this.controller != undefined) {
              this.controller.close()
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            if (this.controller != undefined && this.textValue != '') {
              this.controller.close()
            } else if (this.controller != undefined) {
              this.getUIContext().getRouter().pushUrl({
                url: 'pages/Index2'
              })
              this.controller.close()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }.borderRadius(10).padding({ top: 20 })
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: () => {
        this.onCancel()
      },
      confirm: () => {
        this.onAccept()
      },
      textValue: $textValue
    })
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  onPageShow() {
    const params = this.getUIContext().getRouter().getParams() as Record<string, string>; // 获取传递过来的参数对象
    if (params) {
      this.dialogController?.open()
      this.textValue = params.info as string; // 获取info属性的值
    }
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}
    // Index2.ets
@Entry
@Component
struct Index2 {
  @State message: string = '点击返回';
  build() {
    Column() {
      Button(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold).onClick(() => {
        this.getUIContext().getRouter().back({
          url: 'pages/Index',
          params: {
            info: 'Hello World'
          }
        });
      })
    }.width('100%').height('100%').margin({ top: 20 })
  }
}

弹窗的动画

弹窗通过定义openAnimation控制弹窗出现动画的持续时间，速度等参数。

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    openAnimation: {
      duration: 1200,
      curve: Curve.Friction,
      delay: 500,
      playMode: PlayMode.Alternate,
      onFinish: () => {
        console.info('play end')
      }
    },
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 10,
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

弹窗的样式

弹窗通过定义宽度、高度、背景色、阴影等参数来控制样式。

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text('我是内容').fontSize(16).margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 20,
    width: '80%',
    height: '100px',
    borderWidth: 1,
    borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
    borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
    shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
  })

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null // 将dialogController置空
  }

  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

嵌套自定义弹窗

通过第一个弹窗打开第二个弹窗时，最好将第二个弹窗定义在第一个弹窗的父组件处，通过父组件传给第一个弹窗的回调来打开第二个弹窗。

@CustomDialog
struct CustomDialogExampleTwo {
controllerTwo?: CustomDialogController
@State message: string = "I'm the second dialog box."
@State showIf: boolean = false;
build() {
Column() {
if (this.showIf) {
Text("Text")
.fontSize(30)
.height(100)
}
Text(this.message)
.fontSize(30)
.height(100)
Button("Create Text")
.onClick(()=>{
this.showIf = true;
})
Button ('Close Second Dialog Box')
.onClick(() => {
if (this.controllerTwo != undefined) {
this.controllerTwo.close()
}
})
.margin(20)
}
}
}
@CustomDialog
struct CustomDialogExample {
openSecondBox?: ()=>void
controller?: CustomDialogController

build() {
Column() {
Button ('Open Second Dialog Box and close this box')
.onClick(() => {
this.controller!.close();
this.openSecondBox!();
})
.margin(20)
}.borderRadius(10)
}
}
@Entry
@Component
struct CustomDialogUser {
@State inputValue: string = 'Click Me'
dialogController: CustomDialogController | null = new CustomDialogController({
builder: CustomDialogExample({
openSecondBox: ()=>{
if (this.dialogControllerTwo != null) {
this.dialogControllerTwo.open()
}
}
}),
cancel: this.exitApp,
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -20 },
gridCount: 4,
customStyle: false
})
dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
builder: CustomDialogExampleTwo(),
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -25 } })

aboutToDisappear() {
this.dialogController = null
this.dialogControllerTwo = null
}

onCancel() {
console.info('Callback when the first button is clicked')
}

onAccept() {
console.info('Callback when the second button is clicked')
}

exitApp() {
console.info('Click the callback in the blank area')
}
build() {
Column() {
Button(this.inputValue)
.onClick(() => {
if (this.dialogController != null) {
this.dialogController.open()
}
}).backgroundColor(0x317aff)
}.width('100%').margin({ top: 5 })
}
}

由于自定义弹窗在状态管理侧有父子关系，如果将第二个弹窗定义在第一个弹窗内，那么当父组件（第一个弹窗）被销毁（关闭）时，子组件（第二个弹窗）内无法再继续创建新的组件。

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者，不定期分享原创知识。
  • 同时可以期待后续文章ing🚀。
3.7、自定义弹窗（CustomDialog）
lujianfeiccie2009的专栏
04-17 567
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。build() {Column() {Text('我是内容')3.创建构造器，与装饰器呼应相连。})4.点击与onClick事件绑定的组件使弹窗弹出})
OpenHarmony实战开发-如何实现自定义弹窗 (CustomDialog)
m0_70749039的博客
04-27 1595
CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。
HarmonyOS--自定义弹窗（CustomDialog）
懒洋洋的博客
04-06 1113
自定义弹窗是指在网页或移动应用程序中，用户与应用程序进行交互时弹出的一个窗口。弹窗可以用来展示重要信息、获取用户确认或提供额外的操作选项。与默认的弹窗样式相比，自定义弹窗可以更加灵活、个性化地设计，以满足应用程序的特定需求。1.用@CustomDialog装饰器装饰自定义弹框（自定义弹窗的内容）1.注意使用@CustomDialog装饰器装饰自定义弹窗。2.装饰器和构造器的呼应关系。
鸿蒙开发之ArkUI组件常用组件-CustomDialog/Video
iOSbird的博客
03-28 1579
使用@CustomDialog装饰器装饰自定义弹窗@CustomDialog装饰器用于装饰自定义弹窗，此装饰器内进行自定义内容build() {Column() {Text("这是弹窗")Text("这是自定义弹窗的内容。。。。")创建构造器，与装饰器呼应相连})点击与onClick事件绑定的组件使弹窗弹出Row() {Button('显示弹窗')})
HarmonyOS 鸿蒙应用开发( 六、实现自定义弹窗CustomDialog）
猫哥 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS，AIOT)
01-25 5702
自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。
【鸿蒙软件开发】自定义弹窗（CustomDialog）
m0_62599305的博客
10-25 7577
自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。
鸿蒙5.0开发进阶：UI组件-自定义弹窗 (CustomDialog)
m0_69424697的博客
09-08 1238
开发者可以通过CustomDialogController类显示自定义弹窗。
鸿蒙5.0版开发：ArkTS组件-自定义弹窗 (CustomDialog)
m0_69424697的博客
11-29 1090
通过CustomDialogController类显示自定义弹窗。
鸿蒙5.0进阶开发：UI开发-构建自定义组件
AyomQAQ的博客
12-30 1021
ArkUI开发框架在NDK接口提供了自定义UI组件的能力，这些能力包括自定义测算，自定义布局和自定义绘制。
鸿蒙5.0进阶开发：UI开发-不依赖UI组件的全局自定义弹出框 (openCustomDialog)（推荐）
AyomQAQ的博客
12-22 1722
本文介绍通过入参形式为ComponentContent创建自定义弹出框............
鸿蒙5.0进阶开发：UI开发-容器组件（toolbar开发）
最新发布
AyomQAQ的博客
01-07 349
toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。
【愚公系列】2023年12月 HarmonyOS教学课程 020-ArkUI组件（CustomDialog）
热门推荐
时光隧道
12-08 6万+
HarmonyOS的@CustomDialog是一个自定义对话框控件，它可以帮助开发人员快速创建各种各样的对话框，包括提示框、确认框、输入框等。使用@CustomDialog，开发人员可以自定义对话框的标题、消息、按钮、图标等属性，以及对话框的样式和布局。此外，它还支持自定义对话框的背景、动画和触发事件等属性，以满足不同场景的需求。build() {Column() {Text('我是内容')@Entry@Component})build() {Column() {})
基于ArkUI现有能力实现自定义弹窗封装方案
hongxiaomeng的博客
05-09 871
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 2057
开发版烧录
鸿蒙Harmony应用开发—ArkTS-全局UI方法（警告弹窗）
m0_64420071的博客
03-21 1649
使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容。
鸿蒙NEXT开发【自定义弹框使用（CustomDialog+TextPicker组合）】
houxiliOH的博客
10-11 2088
做过移动端甚至前端开发的小伙伴想必用过弹窗功能，其实弹窗就是一种浮动窗口，主要用于在应用界面上显示额外的信息或提供用户操作选项。而在HarmonyOS开发中，弹窗分为七种类型：AlertDialog、ActionSheet、CustomDialog、CalendarPickerDialog、DatePickerDialog、TimePickerDialog和TextPickerDialog。其他六种弹窗是系统预定义的弹框，而剩下的CustomDialog弹窗是允许开发者自定义弹窗的布局和内容的。
【鸿蒙开发细枝末节】自定义弹窗实现
yihanss的博客
04-09 1946
创建一个新文件，我这里起名叫build() {} }这个注解表示这个控件是对话框如果不写这个的话，无法被其他文件调用接下来我们在build里面写界面，先分析一下效果图：一个输入框TextInput，两个按钮Button水平排列，输入框和按钮竖直排列。最外层使用Column排列输入框和按钮，两个按钮使用Row包起来横排，按钮中间用Blank填充空隙。build() {Column() {TextInput({ placeholder: '请输入内容' }) //输入框。
HarmonyOS实战开发-实现自定义弹窗
2401_82546228的博客
03-28 1703
本篇Codelab基于ArkTS的声明式开发范式实现了三种不同的弹窗，第一种直接使用公共组件，后两种使用CustomDialogController实现自定义弹窗，效果如图所示
鸿蒙UI开发——全局自定义弹窗实现
harmonyClassRoom的博客
12-25 2523
在使用弹窗前，我们需要创建ComponentContent对象，ComponentContent用于定义自定义弹窗的内容。创建一个ComponentContent对象的实例代码如下(核心代码 23 ~ 24行)：​​​​​。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值