门户网站开发方案文档,网站搭建是什么专业,原创网站源码,广告设计公司的成本票项目有哪些简介
弹窗是移动应用中常见的一种用户界面元素#xff0c;常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用#xff0c;除此之外还支持自定义弹窗#xff0c;来满足各种不同的需求。 下面是所有涉及到的弹窗组件官方文档…简介
弹窗是移动应用中常见的一种用户界面元素常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用除此之外还支持自定义弹窗来满足各种不同的需求。 下面是所有涉及到的弹窗组件官方文档请一切以官方文档为准
警告对话弹框 官方文档
操作列表弹框 官方文档
文本滑动选择器弹窗 官方文档
日期滑动选择期弹窗 官方文档
时间滑动选择器弹窗 官方文档
自定义弹窗 官方文档 消息提示
概述
Toast消息提示常用于显示一些简短的消息或提示一般会在短暂停留后自动消失。具体效果如下
使用说明
可使用ohos.promptAction模块中的showToast()方法显示Toast提示使用时需要先导入ohos.promptAction模块如下
import promptAction from ohos.promptActionshowToast()方法的参数定义如下
showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})● message message属性用于设置提示信息
● duration duration属性用于设置提示信息停留时长单位为毫秒取值范围是[1500,10000]
● bottom bottom属性用于设置提示信息到底部的距离
示例
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()显示警告对话框具体用法可参考相关案例或者官方文档。
下面给出一个案例
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()显示操作列表弹窗具体用法可参考相关案例或者官方文档。
下面给出一个案例参考
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文本滑动选择器弹窗 给出一个案例
Entry
Component
struct TextPickerDialogPage {fruits: string[] [苹果, 橘子, 香蕉, 鸭梨, 西瓜]State selectedIndex: number 0build() {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日期滑动选择期弹窗 给出一个案例
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时间滑动选择器弹窗 给出一个案例
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时间滑动选择器弹窗 官方文档 自定义弹窗
概述
当现有组件不满足要求时可考虑自定义弹窗自定义弹窗允许开发者自定义弹窗内容和样式。例如 给出一个示例
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(11).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具体用法可参考相关案例或者官方文档。
