#鸿蒙通关秘籍#如何在ArkUI中创建一个自定义弹窗？

使用自定义弹窗可以让开发者自行定义弹窗的内容和样式。下面是一个CustomDialog的实现：

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

build() { Column() { Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%') .onChange((value: string) => { this.textValue = value }) Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) 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.inputValue = this.textValue this.controller.close() this.confirm() } }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }) }.borderRadius(10) } }