鸿蒙应用开发从入门到实战（二十一）：ArkUI自定义弹窗组件

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
上一篇文章讲述了ArkUI提供的各种内置弹窗组件，当项目中遇到这些组件仍然不满足需求时，可以使用自定义弹窗组件。本文研究自定义弹窗组件的使用。
一、概述

当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。例如

示例代码
pages/component/dialog/新建CustomDialogPage.ets文件

1. @Entry
2. @Component
3. struct CustomDialogPage {
4.   @State answer: string = '?'
5.   controller: CustomDialogController = new CustomDialogController({
6.     builder: TextInputDialog({
7.       confirm: (value) => {
8.         this.answer = value;
9.       }
10.     }),
11.     alignment: DialogAlignment.Bottom,
12.     offset: { dx: 0, dy: -30 }
13.   })
15.   build() {
16.     Column({ space: 50 }) {
17.       Row() {
18.         Text('1+1=')
19.           .fontWeight(FontWeight.Bold)
20.           .fontSize(30)
21.         Text(this.answer)
22.           .fontWeight(FontWeight.Bold)
23.           .fontSize(30)
24.       }
26.       Button('作答')
27.         .onClick(() => {
28.           this.controller.open();
29.         })
30.     }.width('100%')
31.     .height('100%')
32.     .justifyContent(FlexAlign.Center)
33.   }
34. }
37. @CustomDialog
38. struct TextInputDialog {
39.   controller: CustomDialogController = new CustomDialogController({ builder: TextInputDialog() })
40.   confirm: (value: string) => void;
41.   value: string = '';
43.   build() {
44.     Column({ space: 20 }) {
45.       Text('请输入你的答案')
46.       TextInput({ placeholder: '请输入数字' })
47.         .type(InputType.Number)
48.         .onChange((value) => {
49.           this.value = value;
50.         })
51.       Row({ space: 50 }) {
52.         Button('取消')
53.           .onClick(() => {
54.             this.controller.close();
55.           })
56.         Button('确认').onClick(() => {
57.           this.confirm(this.value);
58.           this.controller.close();
59.         })
60.       }
61.     }.padding(20)
62.   }
63. }

复制代码

二、使用说明

显示自定义弹窗需要使用CustomDialogController
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-common-components-custom-dialog-0000001450754206-V2
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！