1. AlertDialog
显示警告弹窗。
AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons)
AlertDialogParamWithConfirm对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| title | ResourceStr | 否 | 弹窗标题。 |
| message | ResourceStr | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。 默认值：true |
| confirm | { value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void } | 否 | 确认按钮的文本内容、文本色、按钮背景色和点击回调。 |
| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | DialogAlignment | 否 | 弹窗在竖直方向上的对齐方式。 默认值：DialogAlignment.Default |
| offset | Offset | 否 | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
AlertDialogParamWithButtons对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| title | ResourceStr | 否 | 弹窗标题。 |
| message | ResourceStr | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。 默认值：true |
| primaryButton | { value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void; } | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| secondaryButton | { value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void; } | 否 | 按钮的文本内容、文本色、按钮背景色和点击回调。 |
| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | DialogAlignment | 否 | 弹窗在竖直方向上的对齐方式。 默认值：DialogAlignment.Default |
| offset | Offset | 否 | 弹窗相对alignment所在位置的偏移量。 |
| gridCount | number | 否 | 弹窗容器宽度所占用栅格数。 |
DialogAlignment枚举说明
| 名称 | 描述 |
|---|---|
| Top | 垂直顶部对齐。 |
| Center | 垂直居中对齐。 |
| Bottom | 垂直底部对齐。 |
| Default | 默认对齐。 |
| TopStart8+ | 左上对齐。 |
| TopEnd8+ | 右上对齐。 |
| CenterStart8+ | 左中对齐。 |
| CenterEnd8+ | 右中对齐。 |
| BottomStart8+ | 左下对齐。 |
| BottomEnd8+ | 右下对齐。 |
示例
@Entry
@Component
struct APage {
build() {
Column() {
Button("警告弹窗，单个按钮").onClick(() => {
AlertDialog.show({
title: '操作提示', // 弹窗标题
message: '你确认删除吗？', // 弹窗内容
autoCancel: true, //点击遮障层时，是否关闭弹窗。
alignment: DialogAlignment.Center, //弹窗位置
gridCount: 3, // 弹窗容器宽度所占用栅格数
offset: { dx: 0, dy: 0 }, //弹窗相对alignment所在位置的偏移量
// 单个按钮
confirm: {
value: '确定',
action: () => {
console.info('xxxxxx')
},
fontColor: '#00f'
},
})
})
Button("警告弹窗，两个按钮").onClick(() => {
AlertDialog.show({
title: '操作提示', // 弹窗标题
message: '你确认删除吗？', // 弹窗内容
autoCancel: true, //点击遮障层时，是否关闭弹窗。
alignment: DialogAlignment.Center, //弹窗位置
gridCount: 3, // 弹窗容器宽度所占用栅格数
offset: { dx: 0, dy: 0 }, //弹窗相对alignment所在位置的偏移量
// 多个按钮
primaryButton: { //主按钮的文本内容、文本色、按钮背景色和点击回调。
value: '确认', //按钮文字
action: () => { //按钮回调
console.info('成功点击')
},
fontColor: '#f00'
},
secondaryButton: { //副按钮的文本内容、文本色、按钮背景色和点击回调。
value: '取消', //按钮文字
action: () => { //按钮回调
console.info('取消了')
},
fontColor: '#00f'
},
})
})
}
.width("100%")
.height("100%")
}
}
2. ActionSheet
显示列表选择弹窗。
ActionSheet.show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } })
参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| title | Resource | string | 是 | 弹窗标题。 |
| message | Resource | string | 是 | 弹窗内容。 |
| autoCancel | boolean | 否 | 点击遮障层时，是否关闭弹窗。 默认值：true |
| confirm | { value: ResourceStr, action: () => void } | 否 | 确认按钮的文本内容和点击回调。 默认值： value：按钮文本内容。 action: 按钮选中时的回调。 |
| cancel | () => void | 否 | 点击遮障层关闭dialog时的回调。 |
| alignment | DialogAlignment | 否 | 弹窗在竖直方向上的对齐方式。 默认值：DialogAlignment.Bottom |
| offset | { dx: Length, dy: Length } | 否 | 弹窗相对alignment所在位置的偏移量。{ dx: 0, dy: 0 } |
| sheets | Array<SheetInfo> | 是 | 设置选项内容，每个选择项支持设置图片、文本和选中的回调。 |
SheetInfo接口说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| title | ResourceStr | 是 | 选项的文本内容。 |
| icon | ResourceStr | 否 | 选项的图标，默认无图标显示。 |
| action | ()=>void | 是 | 选项选中的回调。 |
示例
@Entry
@Component
struct APage {
build() {
Column() {
Button("列表选择弹窗").onClick(() => {
ActionSheet.show({
title: '请选择水果',
message: '水果信息',
autoCancel: true,
confirm: {
value: '确认按钮',
action: () => {
console.log('确认点击成功')
}
},
cancel: () => {
console.log('你点击了关闭')
},
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -20 },
sheets: [
{
title: 'apples',
action: () => {
console.log('apples')
}
},
{
title: 'bananas',
action: () => {
console.log('bananas')
}
},
{
title: 'pears',
action: () => {
console.log('pears')
}
}
]
})
})
}
.width("100%")
.height("100%")
}
}
3. DatePickerDialog
显示日期滑动选择器弹窗。
DatePickerDialog.show(options?: DatePickerDialogOptions)
参数：
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
|---|---|---|---|---|
| start | Date | 否 | Date('1970-1-1') | 设置选择器的起始日期。 |
| end | Date | 否 | Date('2100-12-31') | 设置选择器的结束日期。 |
| selected | Date | 否 | 当前系统日期 | 设置当前选中的日期。 |
| lunar | boolean | 否 | false | 日期是否显示为农历。 |
| onAccept | (value: DatePickerResult) => void | 否 | - | 点击弹窗中的“确定”按钮时触发该回调。 |
| onCancel | () => void | 否 | - | 点击弹窗中的“取消”按钮时触发该回调。 |
| onChange | (value: DatePickerResult) => void | 否 | - | 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。 |
示例
@Entry
@Component
struct APage {
selectedDate: Date = new Date("2010-1-1")
build() {
Column() {
Button("阳历日期")
.margin(20)
.onClick(() => {
DatePickerDialog.show({
start: new Date("2000-1-1"),
end: new Date("2100-12-31"),
selected: this.selectedDate,
onAccept: (value: DatePickerResult) => {
// 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
},
onChange: (value: DatePickerResult) => {
console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
Button("阴历日期")
.margin(20)
.onClick(() => {
DatePickerDialog.show({
start: new Date("2000-1-1"),
end: new Date("2100-12-31"),
selected: this.selectedDate,
lunar: true,
onAccept: (value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("DatePickerDialog:onCancel()")
},
onChange: (value: DatePickerResult) => {
console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
.width("100%")
.height("100%")
}
}
4. TimePickerDialog
显示时间滑动选择器弹窗。
TimePickerDialog.show(options?: TimePickerDialogOptions)
TimePickerDialogOptions参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| selected | Date | 否 | 设置当前选中的时间。 默认值：当前系统时间 |
| useMilitaryTime | boolean | 否 | 展示时间是否为24小时制，默认为12小时制。 默认值：false |
| onAccept | (value: TimePickerResult) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
| onChange | (value: TimePickerResult) => void | 否 | 滑动弹窗中的选择器使当前选中时间改变时触发该回调。 |
示例
@Entry
@Component
struct APage {
private selectTime: Date = new Date('2020-12-25T08:30:00')
build() {
Column() {
Button("TimePickerDialog 12小时制")
.margin(20)
.onClick(() => {
TimePickerDialog.show({
selected: this.selectTime,
onAccept: (value: TimePickerResult) => {
// 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
Button("TimePickerDialog 24小时制")
.margin(20)
.onClick(() => {
TimePickerDialog.show({
selected: this.selectTime,
useMilitaryTime: true,
onAccept: (value: TimePickerResult) => {
this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TimePickerDialog:onCancel()")
},
onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
.width("100%")
.height("100%")
}
}
5. TextPickerDialog
显示文本滑动选择器弹窗。
TextPickerDialog.show(options?: TextPickerDialogOptions)
TextPickerDialogOptions参数：
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| range | string[] | Resource | 是 | 设置文本选择器的选择范围。 |
| selected | number | 否 | 设置选中项的索引值。 默认值：0 |
| value | string | 否 | 设置选中项的文本内容。当设置了selected参数时，该参数不生效。如果设置的value值不在range范围内，则默认取range第一个元素。 |
| defaultPickerItemHeight | number | string | 否 | 设置选择器中选项的高度。 |
| onAccept | (value: TextPickerResult) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
| onChange | (value: TextPickerResult) => void | 否 | 滑动弹窗中的选择器使当前选中项改变时触发该回调。 |
TextPickerResult对象说明
| 名称 | 类型 | 描述 |
|---|---|---|
| value | string | 选中项的文本内容。 |
| index | number | 选中项在选择范围数组中的索引值。 |
示例
@Entry
@Component
struct APage {
private select: number = 2
private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
build() {
Column() {
Button("文本滑动选择器")
.margin(20)
.onClick(() => {
TextPickerDialog.show({
range: this.fruits,
selected: this.select,
onAccept: (value: TextPickerResult) => {
// 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
this.select = value.index
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TextPickerDialog:onCancel()")
},
onChange: (value: TextPickerResult) => {
console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
.width('100%')
.height('100%')
}
}
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
