ArkUI自定义弹窗组件
一、概述
当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。例如
1自定义弹窗
示例代码
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)
}
}
二、使用说明