固定样式弹出框
一般用于简单场景使用,没法改变
AlertDialog
代码
ts
@Entry
@Component
struct Index11 {
build() {
Column({ space: 5 }) {
Button('AlertDialog Set Duration')
.onClick(() => {
// 建议使用this.getUIContext().showAlertDialog()
AlertDialog.show(
{
// 标题
title: 'AlertDialog 1',
// 内容
message: 'Set Animation Duration open 3 second, close 100ms',
// 点击黑框 是否自动关闭
autoCancel: true,
// 弹框位置
alignment: DialogAlignment.Top,
// 偏移
offset: { dx: 0, dy: -20 },
// 弹窗容器宽度所占用栅格数。
gridCount: 3,
// 动画
transition: TransitionEffect.asymmetric(TransitionEffect.OPACITY
.animation({ duration: 3000, curve: Curve.Sharp })
.combine(TransitionEffect.scale({ x: 1.5, y: 1.5 })
.animation({ duration: 3000, curve: Curve.Sharp })),
TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth })
.combine(TransitionEffect.scale({ x: 0.5, y: 0.5 })
.animation({ duration: 100, curve: Curve.Smooth }))),
// 确认按钮
confirm: {
value: 'button',
action: () => {
console.info('Button-clicking callback');
}
},
// 点击了取消
cancel: () => {
console.info('Closed callbacks');
}
}
)
})
.backgroundColor(0x317aff).height("88px")
}.width('100%').margin({ top: 5 })
}
}多个按钮
js
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column(){
Row(){
Button('two button dialog')
.onClick(() => {
// 建议使用this.getUIContext().showAlertDialog()
AlertDialog.show(
{
title: 'title',
subtitle: 'subtitle',
message: 'text',
autoCancel: true,
alignment: DialogAlignment.Bottom,
gridCount: 4,
offset: { dx: 0, dy: -20 },
primaryButton: {
value: 'cancel',
action: () => {
console.info('Callback when the first button is clicked')
}
},
secondaryButton: {
enabled: true,
defaultFocus: true,
style: DialogButtonStyle.HIGHLIGHT,
value: 'ok',
action: () => {
console.info('Callback when the second button is clicked')
}
},
cancel: () => {
console.info('Closed callbacks')
},
onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
console.log("dialog onWillDismiss")
if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
dismissDialogAction.dismiss()
}
if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
dismissDialogAction.dismiss()
}
}
}
)
}).backgroundColor(0x317aff)
}
}
}
}showActionMenu
代码
ts
import { PromptAction } from '@kit.ArkUI';
@Entry
@Component
struct Index9 {
openDialog() {
let uiContext = this.getUIContext();
let promptAction: PromptAction = uiContext.getPromptAction();
try {
promptAction.showActionMenu({
title: 'showActionMenu 标题',
buttons: [
{
text: '列表1',
color: 'red',
primary: true
},
{
text: '列表2',
color: '#000000'
},
]
})
.then(data => {
console.info('showActionMenu success, click button: ' + data.index);
})
.catch((err: Error) => {
console.error('showActionMenu error: ' + err);
})
} catch (error) {
}
}
build() {
Column() {
Row() {
Button() {
Text("点击弹出showActionMenu")
}.onClick(() => {
this.openDialog()
})
}
}
}
}showDialog
一般用于确定框
代码
ts
import { PromptAction } from '@kit.ArkUI';
@Entry
@Component
struct Index10 {
openDialog() {
let uiContext = this.getUIContext();
let promptAction: PromptAction = uiContext.getPromptAction();
try {
promptAction.showDialog({
title: 'showDialog Title Info',
message: 'Message Info',
buttons: [
{
text: 'button1',
color: '#000000'
},
{
text: 'button2',
color: '#000000'
}
]
}, (err, data) => {
if (err) {
console.error('showDialog err: ' + err);
return;
}
console.info('showDialog success callback, click button: ' + data.index);
});
} catch (error) {
}
}
build() {
Button("点击我").type(ButtonType.Normal).onClick(() => {
this.openDialog()
})
}
}日历选择器
代码
ts
@Entry
@Component
struct CalendarPickerDialogExample {
private selectedDate: Date = new Date('2024-04-23')
build() {
Column() {
Button("Show CalendarPicker Dialog")
.margin(20)
.onClick(() => {
console.info("CalendarDialog.show")
CalendarPickerDialog.show({
selected: this.selectedDate,
acceptButtonStyle: {
fontColor: '#2787d9',
fontSize: '16fp',
backgroundColor: '#f7f7f7',
borderRadius: 10
},
cancelButtonStyle: {
fontColor: Color.Red,
fontSize: '16fp',
backgroundColor: '#f7f7f7',
borderRadius: 10
},
onAccept: (date: Date) => {
// 当弹出框再次弹出时显示选中的是上一次确定的日期
this.selectedDate = date
console.log(this.selectedDate.toString())
}
})
})
}.width('100%')
}
}日期滑动选择器
代码
ts
@Entry
@Component
struct DatePickerDialogExample {
@State selectTime: Date = new Date('2023-12-25T08:30:00');
build() {
Column() {
Button('showDatePickerDialog')
.margin(30)
.onClick(() => {
this.getUIContext().showDatePickerDialog({
start: new Date("2000-1-1"),
end: new Date("2100-12-31"),
selected: this.selectTime,
textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } },
selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } },
acceptButtonStyle: {
fontColor: '#2787d9',
fontSize: '16fp',
backgroundColor: '#f7f7f7',
borderRadius: 10
},
cancelButtonStyle: {
fontColor: Color.Red,
fontSize: '16fp',
backgroundColor: '#f7f7f7',
borderRadius: 10
},
lunarSwitch: true,
showTime: true,
onDateAccept: (value: Date) => {
this.selectTime = value
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
},
})
})
}.width('100%').margin({ top: 5 })
}
}时间滑动选择器弹窗
代码
ts
// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
@State selectTime: Date = new Date('2023-12-25T08:30:00');
build() {
Column() {
Button('showTimePickerDialog')
.margin(30)
.onClick(() => {
this.getUIContext().showTimePickerDialog({
selected: this.selectTime,
textStyle: { color: '#2787d9', font: { size: '14fp', weight: FontWeight.Normal } },
selectedTextStyle: { color: '#004aaf', font: { size: '18fp', weight: FontWeight.Regular } },
acceptButtonStyle: {
fontColor: '#2787d9',
fontSize: '16fp',
backgroundColor: '#f7f7f7',
borderRadius: 10
},
cancelButtonStyle: {
fontColor: Color.Red,
fontSize: '16fp',
backgroundColor: '#f7f7f7',
borderRadius: 10
}
})
})
}.width('100%').margin({ top: 5 })
}
}文本(省市联动)
代码
ts
@Entry
@Component
struct TextPickerDialogExample {
private fruits: TextCascadePickerRangeContent[] = [
{
text: '辽宁省',
children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
{ text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
},
{
text: '吉林省',
children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] },
{ text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }]
},
{
text: '黑龙江省',
children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
{ text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
}
]
private select: number = 0;
build() {
Column() {
Button('showTextPickerDialog')
.margin(30)
.onClick(() => {
this.getUIContext().showTextPickerDialog({
range: this.fruits,
selected: this.select,
onAccept: (value: TextPickerResult) => {
this.select = value.index as number
}
})
})
}.width('100%').margin({ top: 5 })
}
}