大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！
上一篇文章讲述了 ArkUI 提供的各种内置弹窗组件，当项目中遇到这些组件仍然不满足需求时，可以使用自定义弹窗组件。本文研究自定义弹窗组件的使用。
一、概述
当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。例如
示例代码
pages/component/dialog/新建 CustomDialogPage.ets 文件
@Entry@Componentstruct 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) }}
@CustomDialogstruct 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，详细使用参考官方文档。
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
评论