大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
上一篇文章讲述了ArkUI提供的各种内置弹窗组件，当项目中遇到这些组件仍然不满足需求时，可以使用自定义弹窗组件。本文研究自定义弹窗组件的使用。
一、概述
当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。例如
示例代码
pages/component/dialog/新建CustomDialogPage.ets文件
@Entry
@Component
struct CustomDialogPage {@State answer: string = '?'controller: CustomDialogController = new CustomDialogController({builder: TextInputDialog({confirm: (value) => {this.answer = value;}}),alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -30 }})build() {Column({ space: 50 }) {Row() {Text('1+1=').fontWeight(FontWeight.Bold).fontSize(30)Text(this.answer).fontWeight(FontWeight.Bold).fontSize(30)}Button('作答').onClick(() => {this.controller.open();})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}@CustomDialog
struct TextInputDialog {controller: CustomDialogController = new CustomDialogController({ builder: TextInputDialog() })confirm: (value: string) => void;value: string = '';build() {Column({ space: 20 }) {Text('请输入你的答案')TextInput({ placeholder: '请输入数字' }).type(InputType.Number).onChange((value) => {this.value = value;})Row({ space: 50 }) {Button('取消').onClick(() => {this.controller.close();})Button('确认').onClick(() => {this.confirm(this.value);this.controller.close();})}}.padding(20)}
}
二、使用说明
显示自定义弹窗需要使用CustomDialogController
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-common-components-custom-dialog-0000001450754206-V2
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
)
