简介
弹窗是移动应用中常见的一种用户界面元素,常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS
提供了多种内置的弹窗供开发者使用,除此之外还支持自定义弹窗,来满足各种不同的需求。
下面是所有涉及到的弹窗组件官方文档,请一切以官方文档为准
消息提示
概述
Toast
(消息提示),常用于显示一些简短的消息或提示,一般会在短暂停留后自动消失。具体效果如下
使用说明
可使用@ohos.promptAction
模块中的showToast()
方法显示Toast
提示,使用时需要先导入@ohos.promptAction
模块,如下
typescript
import promptAction from '@ohos.promptAction'
showToast()
方法的参数定义如下
typescript
showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})
● message
message
属性用于设置提示信息
● duration
duration
属性用于设置提示信息停留时长,单位为毫秒,取值范围是[1500,10000]
● bottom
bottom属性用于设置提示信息到底部的距离
示例
typescript
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct ToastPage {
build() {
Column() {
Button('提示信息')
.onClick(() => {
promptAction.showToast({
message: '网络连接已断开',
duration: 2000,
bottom: 50
});
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
警告对话框
概述
AlertDialog
(警告对话框)用于向用户发出警告或确认操作的提示,确保用户在敏感操作前进行确认。具体效果如下
可使用全局方法AlertDialog.show()
显示警告对话框,具体用法可参考相关案例或者官方文档。
下面给出一个案例
typescript
@Entry
@Component
struct AlertDialogPage {
build() {
Column() {
Button('删除')
.backgroundColor(Color.Red)
.onClick(() => {
AlertDialog.show(
{
title: '删除该记录?', //弹窗标题
message: '删除后无法恢复,您确认要删除吗?', //弹窗信息
autoCancel: true, //点击遮障层时,是否关闭弹窗
alignment: DialogAlignment.Bottom, //弹窗位置
offset: { dx: 0, dy: -20 }, //相对于弹窗位置的偏移量
primaryButton: { //主要按钮,位于左侧
value: '确认', //按钮内容
fontColor: Color.Red, //字体颜色
action: () => { //点击回调
console.log('确认删除')
}
},
secondaryButton: { //次要按钮,位于右侧
value: '取消',
action: () => {
console.log('取消删除')
}
},
cancel: () => { //点击遮罩层取消时的回调
console.info('Closed callbacks')
}
}
)
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
操作列表弹框
概述
ActionSheet
(操作列表弹窗)用于提供一组选项给用户选择,用户从中选择后,可执行相应的操作。具体效果如下
使用说明
可使用全局方法ActionSheet.show()
显示操作列表弹窗,具体用法可参考相关案例或者官方文档。
下面给出一个案例参考
typescript
@Entry
@Component
struct ActionSheetPage {
build() {
Column() {
Button('选择操作')
.onClick(() => {
ActionSheet.show({
title: '文件操作', //弹窗标题
message: '请选择你要对该文件执行的操作', //弹窗内容
autoCancel: true, //点击遮障层时,是否关闭弹窗
alignment: DialogAlignment.Bottom, //弹窗位置
offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量
confirm: { //底部按钮
value: '取消', //按钮文本内容
action: () => { //按钮回调函数
console.log('点击按钮取消')
}
},
// cancel: () => { //点击遮障层关闭弹窗时的回调
// console.log('点击遮障层取消')
// },
sheets: [ //操作选项列表
{
icon: $r('app.media.icon_copy'), //图标
title: '复制', //文本
action: () => { //回调
console.log('复制文件')
}
},
{
icon: $r('app.media.icon_cut'),
title: '剪切',
action: () => {
console.log('剪切文件')
}
},
{
icon: $r('app.media.icon_delete'),
title: '删除',
action: () => {
console.log('删除文件')
}
}
]
})
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
选择器弹窗
概述
选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS
内置了多种选择器弹窗,例如文本选择器、日期选择器、时间选择器等等,各选择器效果如下
TextPickerDialog
(文本滑动选择器弹窗)
给出一个案例
typescript
@Entry
@Component
struct TextPickerDialogPage {
fruits: string[] = ['苹果', '橘子', '香蕉', '鸭梨', '西瓜']
@State selectedIndex: number = 0
build() {
Column({ space: 50 }) {
Text(this.fruits[this.selectedIndex])
.fontWeight(FontWeight.Bold)
.fontSize(30)
Button("选择文本")
.margin(20)
.onClick(() => {
TextPickerDialog.show({
range: this.fruits, //设置文本选择器的选择范围
selected: this.selectedIndex, //设置选中的索引
onAccept: (value: TextPickerResult) => { //确定按钮的回调函数
this.selectedIndex = value.index;
},
onCancel: () => { //取消按钮的回调函数
console.info('取消选择')
},
onChange: (value: TextPickerResult) => { //选择器选中内容发生变化时触发的回调函数
console.info(`当前文本:${JSON.stringify(value)}`)
}
})
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
DatePickerDialog
(日期滑动选择期弹窗)
给出一个案例
typescript
@Entry
@Component
struct DatePickerDialogPage {
@State date: Date = new Date("2010-1-1");
build() {
Column({ space: 50 }) {
Text(`${this.date.getFullYear()}年${this.date.getMonth() + 1}月${this.date.getDate()}日`)
.fontWeight(FontWeight.Bold)
.fontSize(30)
Button("选择日期")
.margin(20)
.onClick(() => {
DatePickerDialog.show({
start: new Date("2000-1-1"), //设置选择器的其实日期
end: new Date("2100-12-31"), //设置选择器的结束日期
selected: this.date, //设置当前选中的日期
onAccept: (value: DatePickerResult) => { //确定按钮的回调
this.date.setFullYear(value.year, value.month, value.day)
},
onCancel: () => { //取消按钮的回调
console.info('取消选择')
},
onChange: (value: DatePickerResult) => { //选择器当前内容发生变化时触发的回调函数
console.info(`当前日期:${JSON.stringify(value)}`)
}
})
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
TimePickerDialog
(时间滑动选择器弹窗)
给出一个案例
typescript
@Entry
@Component
struct TimePickerDialogPage {
@State time: Date = new Date('2020-01-01T00:00:00')
build() {
Column({ space: 50 }) {
Text(`${this.time.getHours()}:${this.time.getMinutes()}`)
.fontWeight(FontWeight.Bold)
.fontSize(30)
Button("选择时间")
.margin(20)
.onClick(() => {
TimePickerDialog.show({
selected: this.time, //设置当前选中的时间
useMilitaryTime: true, //是否使用24小时制
onAccept: (value: TimePickerResult) => { //确认按钮的回调
this.time.setHours(value.hour, value.minute);
},
onCancel: () => { //取消按钮的回调
console.info('取消选择')
},
onChange: (value: TimePickerResult) => { //选择器当前内容发生变化时触发的回调函数
console.info(`当前时间:${JSON.stringify(value)}`)
}
})
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
使用说明
具体用法可参考相关案例或者官方文档,各选择器的官方文档地址如下
类型 文档地址
TextPickerDialog
(文本滑动选择器弹窗) 官方文档
DatePickerDialog
(日期滑动选择期弹窗) 官方文档
TimePickerDialog
(时间滑动选择器弹窗) 官方文档
自定义弹窗
概述
当现有组件不满足要求时,可考虑自定义弹窗,自定义弹窗允许开发者自定义弹窗内容和样式。例如
给出一个示例
typescript
@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)
}
}
使用说明
显示自定义弹窗需要使用CustomDialogController
,具体用法可参考相关案例或者官方文档。