HarmonyOS自定义弹出对话框CustomDialog并传递变量

HarmonyOS定义了一系列弹窗反馈类的组件​

和前端开辟框架VUE3配套生态库element plus中的提供各种组件相比，还是要少一些。大概是手机端利用和PC端利用的差异导致的​

如果内置的弹窗不满足要求，可以基于CustomDialog自定义出各种个性化的反馈组件。
起首新建一个ets文件，使用CustomDialog装饰器定义一个自定义的dialog。其内部的语法和平凡的Component是完全雷同的，通过组合基础组件可以实现差异的布局。
注意需要传递的参数使用@Link举行修饰，在“实例化”的时候引用
​

1. @CustomDialog
2. export default struct CustomActionSheet {
3.   @Link actionList: string[]
4.   controller: CustomDialogController
5.   cancel: () => void
8.   build() {
9.     Column() {
10.       ForEach(this.actionList, (item: string) => {
11.         Text(item)
12.           .width('100%')
13.           .height(24)
14.           .fontSize(16)
15.           .margin({ top: 2, bottom: 2 })
16.           .textAlign(TextAlign.Center)
17.           .onClick((e)=>{
19.           })
20.       }, item => item)
23.       Button('取消', { type: ButtonType.Normal }).borderRadius(4).width(80).onClick((e) => {
24.         this.controller.close()
25.         this.cancel()
26.       })
27.     }
28.     .justifyContent(FlexAlign.SpaceAround)
29.     .alignItems(HorizontalAlign.Center)
30.     .height(200)
31.     .padding({ left: 10, top: 20 })
32.     .borderRadius(8)
33.   }
34. }

复制代码

​然后在父组件中实例化CustomDialogController，并在builder属性中引用这个CustomDialog​

1. diaglogController: CustomDialogController = new CustomDialogController({
2.     builder: CustomActionSheet({
3.       cancel: this.onCancel,
4.       actionList: $actionList
5.     }),
6.     cancel: this.existApp,
7.     autoCancel: true,
8.     alignment: DialogAlignment.Bottom,
9.     offset: { dx: 0, dy: -20 },
10.     gridCount: 4,
11.     customStyle: false
12.   })

复制代码

在需要触发的地方调用即可​

1. Button().onClick((e) => {
2.           if (this.diaglogController != undefined) {
3.             this.diaglogController.open()
5.           }
6.         })

复制代码

最闭幕果：

​​​​​​​

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