最近準備系統(tǒng)學習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,//出現(xiàn)位置
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寺晌、在頁面中使用
*注意 如確認和取消按鈕也要自己實現(xiàn)
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用法就這些耘婚，官方文檔
