最近准备系统学习ArkUI和ArkTS相关知识，在这里做一个记录。
本次介绍鸿蒙应用中的Dialog，和各种选择器组件弹框
- DatePickerDialog
DatePickerDialog.show({
start: new Date("1999-01-01"),
end: new Date(),
selected:new Date("2024-03-03"),
// lunar:true //是否显示农历
onAccept:(value: DatePickerResult)=>{
//选中的值DatePickerResult包含三个值
year，month（取值0-11实际月份要+1），day
})
DatePickerDialog
- TextPickerDialog
TextPickerDialog.show({
range: ["男", "女"],
selected: 0,
onAccept: (value: TextPickerResult) => {
//选中的值TextPickerResult包含两个值
value（值），index（下标）
}
})
TextPickerDialog
- AlertDialog
AlertDialog.show({
message: "你在干什么",
primaryButton: {
value: "确定",
action: () => {
//确定事件
}
},
secondaryButton: {
value: "取消",
action: () => {
//取消事件
}
},
alignment: DialogAlignment.Bottom,//出现位置
offset: { dx: 0, dy: -20 }//偏移
})
AlertDialog
- TimePickerDialog
TimePickerDialog.show({
selected: new Date(),
useMilitaryTime: true, //是否24小时制
onAccept: (value: TimePickerResult) => {
}
})
TimePickerDialog
- ActionSheet
ActionSheet.show({
title: 'ActionSheet title',
message: 'message',
autoCancel: true,
confirm: {
value: '确认',
action: () => {
console.log('Get Alert Dialog handled')
}
},
cancel: () => {
console.log('actionSheet canceled')
},
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -10 },
sheets: [
{
title: '苹果',
action: () => {
console.log('apples')
this.message = "苹果"
}
},
{
title: '香蕉',
action: () => {
console.log('bananas')
this.message = "香蕉"
}
},
{
title: '梨',
action: () => {
console.log('pears')
this.message = "梨"
}
}
]
})
ActionSheet
- 自定义dialog
分为2步
1、自定义弹框内容，使用@CustomDialog修饰
2、在页面中使用
*注意 如确认和取消按钮也要自己实现
1、 自定义弹框内容，使用@CustomDialog修饰
@CustomDialog
struct MyDialog {
private controller: CustomDialogController
build() {
Column() {
Text("随便放点什么")
Button("我是一个按钮", { type: ButtonType.Capsule })
}
.padding(20)
}
aboutToAppear() {
//初始化数据
}
}
2、 在页面中使用
customDialogController: CustomDialogController = new CustomDialogController({
alignment: DialogAlignment.Center,
builder: MyDialog({}),
offset: { dx: 0, dy: -20 }
})
...
.onClick(_ => {
this.customDialogController.open()
}
自定义dialog内容
总结
基本的dialog用法就这些，官方文档
