devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS系统开发ArkTS常用组件弹窗及参数

作者：笔触狂放9 | 2024-03-24 21:42:43

赞

踩

HarmonyOS系统开发ArkTS常用组件弹窗及参数

       弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，如消息提示、警告对话框、选择器弹窗、操作列表弹窗，除此之外还支持自定义弹窗，来满足各种不同的需求。

  • 消息提示
  • 警告对话框
  • 操作列表弹窗
  • 选择器弹窗
  • 自定义弹窗

1、消息提示

     Toast（消息提示）组件，常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。

     使用需要通过 @ohos.promptAction模块中的showToast()，方法显示 Toast 提示，使用时需要先导入@ohos.promptAction模块。

     showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})

  • message：message属性用于设置提示信息
  • duration：duration属性用于设置提示信息停留时长，单位为毫秒，取值范围是[1500,10000]
  • bottom：bottom属性用于设置提示信息到底部的距离
  1. import promptAction from '@ohos.promptAction'
  2.  
  3. @Entry
  4. @Component
  5. struct textInput {
  6.   @State message: string = '';
  7.  
  8.   build() {
  9.     Column({ space: 10 }) {
  10.       TextInput({ 'placeholder': '请输入账号', 'text': '' })
  11.         .onChange((newText) => {
  12.           this.message = newText
  13.         })
  14.         .placeholderFont({ weight: '800' })
  15.         .width(200)
  16.         .height(50)
  17.         .backgroundColor(Color.Gray)
  18.       Button('提交')
  19.         .fontSize(25)
  20.         .onClick(() => {
  21.           console.log(this.message.length + '')
  22.           if (this.message.length<5) {
  23.              promptAction.showToast({
  24.                message:'您的账号有误',
  25.                duration:1600,
  26.                bottom:150
  27.              })
  28.           }
  29.         })
  30.     }
  31.     .width('100%')
  32.     .height("100%")
  33.     .justifyContent(FlexAlign.Center)
  34.   }
  35. }

2、警告对话框

      AlertDialog（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。AlertDialog.show()调用。

  1.  
  2. @Entry
  3. @Component
  4. struct textInput {
  5.   build() {
  6.     Column({ space: 10 }) {
  7.       Row({ space: 10 }) {
  8.         Text("一本正经").fontSize(30)
  9.         Text("32套").fontSize(30)
  10.         Button('删除')
  11.           .fontSize(25)
  12.           .onClick(() => {
  13.             AlertDialog.show({
  14.               title: "删除订单记录", //弹窗标题
  15.               message: '确认删除吗？', // 提示消息
  16.               autoCancel:false,// 点击遮罩层即阴影，是否关闭弹窗。true是点击遮罩层弹窗关闭。
  17.               alignment: DialogAlignment.Bottom, //弹窗位置
  18.               offset: { dx: 0, dy: -30 }, // 相对弹窗位置即DialogAlignment.Bottom 在x轴和y轴偏移
  19.               primaryButton: {
  20.                 value: "确定",
  21.                 fontColor:Color.Red,
  22.                 action: () => {
  23.                 }
  24.               },
  25.               secondaryButton: {
  26.                 value: "取消",
  27.                 action: () => {
  28.                 }
  29.               },
  30.               cancel:() => {// 点击遮罩层后，遮罩层消失弹窗自动关闭时候触发，此时必须autoCancel:true，为false则失效
  31.                 console.log('点击遮罩层后，遮罩层消失弹窗自动关闭时候触发');
  32.               }
  33.  
  34.             })
  35.           })
  36.       }
  37.  
  38.     }
  39.     .width('100%')
  40.     .height("100%")
  41.     .justifyContent(FlexAlign.Center)
  42.   }
  43. }

3、操作列表弹框

        ActionSheet（操作列表弹窗）用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。
      可使用全局方法ActionSheet.show()显示操作列表弹窗，具体用法可参考相关案例或者官方文档。

  1. @Entry
  2. @Component
  3. struct textInput {
  4.   build() {
  5.     Column({ space: 10 }) {
  6.       Row({ space: 10 }) {
  7.         Text("一本正经").fontSize(30)
  8.         Text("32套").fontSize(30)
  9.         Button('删除')
  10.           .fontSize(25)
  11.           .onClick(() => {
  12.             ActionSheet.show({
  13.               title: "文件操作", //弹窗标题
  14.               message: '请选择你要执行的文件', // 提示消息
  15.               autoCancel: false, // 点击遮罩层即阴影，是否关闭弹窗。true是点击遮罩层弹窗关闭。
  16.               alignment: DialogAlignment.Bottom, //弹窗位置
  17.               offset: { dx: 0, dy: -30 }, // 相对弹窗位置即DialogAlignment.Bottom 在x轴和y轴偏移
  18.               confirm: {
  19.                 value: '取消',
  20.                 action: () => {
  21.                   console.log('Get Alert Dialog handled')
  22.                 }
  23.               },
  24.               cancel: () => { // 点击遮罩层后，遮罩层消失弹窗自动关闭时候触发，此时必须autoCancel:true，为false则失效
  25.                 console.log('点击遮罩层后，遮罩层消失弹窗自动关闭时候触发');
  26.               },
  27.               sheets: [
  28.                 {
  29.                   icon:$r('app.media.icon_copy'),
  30.                   title:'复制文件',
  31.                   action: () => {
  32.                     console.error('复制文件')
  33.                   }
  34.                 },
  35.                 {
  36.                   icon:$r('app.media.icon_cut'),
  37.                   title: '剪切文件',
  38.                   action: () => {
  39.                     console.error('剪切文件')
  40.                   }
  41.                 },
  42.                 {
  43.                   icon:$r('app.media.icon_delete'),
  44.                   title: '删除文件',
  45.                   action: () => {
  46.                     console.error('删除文件')
  47.                   }
  48.                 }
  49.               ],
  50.             })
  51.           })
  52.       }
  53.  
  54.     }
  55.     .width('100%')
  56.     .height("100%")
  57.     .justifyContent(FlexAlign.Center)
  58.   }
  59. }

4、选择器弹窗

       选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS内置了多种选择器弹窗，例如文本选择器、日期选择器、时间选择器等等。

              TextPickerDialog（文本滑动选择器弹窗）
              DatePickerDialog（日期滑动选择期弹窗）
              TimePickerDialog（时间滑动选择器弹窗）

  1. @Entry
  2. @Component
  3. struct textInput {
  4.   @State select: number = 0
  5.   @State word: string = ''
  6.   private fruits: string[] = ['苹果', '橘子', '香蕉', '荔枝']
  7.  
  8.   build() {
  9.     Column({ space: 10 }) {
  10.       Row({ space: 10 }) {
  11.         Text("一本正经").fontSize(25)
  12.         Text("32套").fontSize(25)
  13.         Text(this.word).fontSize(25)
  14.       }
  15.  
  16.       Button('选择')
  17.         .fontSize(25)
  18.         .onClick(() => {
  19.           TextPickerDialog.show({
  20.             range: this.fruits, // 指定下拉表内容
  21.             selected: this.select, // 指定默认值
  22.             onAccept: (value: TextPickerResult) => {
  23.               console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
  24.               this.select = value.index
  25.               this.word = value.value
  26.             },
  27.             onCancel: () => {// 只要改变值就会触发，确认也会触发
  28.               console.info("TextPickerDialog:onCancel()")
  29.             },
  30.             onChange: (value: TextPickerResult) => {
  31.               console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
  32.             }
  33.           })
  34.         })
  35.  
  36.     }
  37.     .width('100%')
  38.     .height("100%")
  39.     .justifyContent(FlexAlign.Center)
  40.   }
  41. }

5、选择器弹窗

       选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS内置了多种选择器弹窗，例如文本选择器、日期选择器、时间选择器等等

  1. @Entry
  2. @Component
  3. struct textInput {
  4.   @State select: number = 0
  5.   @State word: string = ''
  6.   private fruits: string[] = ['苹果', '橘子', '香蕉', '荔枝']
  7.   @State date: string = ''
  8.  
  9.   build() {
  10.     Column({ space: 10 }) {
  11.       Text("日期："+this.date).fontSize(25)
  12.       Row({ space: 10 }) {
  13.         Text("一本正经").fontSize(25)
  14.         Text("32套").fontSize(25)
  15.         Text(this.word).fontSize(25)
  16.       }
  17.  
  18.       Row({ space: 10 }) {
  19.         Button('选择')
  20.           .fontSize(25)
  21.           .onClick(() => {
  22.             TextPickerDialog.show({
  23.               range: this.fruits, // 指定下拉表内容
  24.               selected: this.select, // 指定默认值
  25.               onAccept: (value: TextPickerResult) => {
  26.                 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
  27.                 this.select = value.index
  28.                 this.word = value.value
  29.               },
  30.               onCancel: () => { // 只要改变值就会触发，确认也会触发
  31.                 console.info("TextPickerDialog:onCancel()")
  32.               },
  33.               onChange: (value: TextPickerResult) => {
  34.                 console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
  35.               }
  36.             })
  37.           })
  38.         Button('日期').fontSize(25)
  39.           .onClick(() => {
  40.             DatePickerDialog.show({
  41.               onAccept: (value: DatePickerResult) => {
  42.                 this.date = value.year + '年' + (value.month+1) + '月' + value.day + '日'
  43.                 console.info("DatePickerResult:onAccept()" + JSON.stringify(value) + ' ' + this.date)
  44.               },
  45.               onCancel: () => { // 只要改变值就会触发，确认也会触发
  46.                 console.info("DatePickerResult:onCancel()")
  47.               },
  48.               onChange: (value: DatePickerResult) => {
  49.                 console.info("DatePickerResult:onChange()" + JSON.stringify(value))
  50.               }
  51.             })
  52.           })
  53.       }
  54.  
  55.     }
  56.     .width('100%')
  57.     .height("100%")
  58.     .justifyContent(FlexAlign.Center)
  59.   }
  60. }

6、自定义弹窗

        当现有组件不满足要求时，可考虑自定义弹窗，自定义弹窗允许开发者自定义弹窗内容和样式。

自定义弹窗实现四步骤：

  1. 使用@CustomDialog装饰器装饰自定义弹窗
  2. @CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）
  3. 创建构造器，与装饰器呼应相连
  4. 点击与onClick事件绑定的组件使弹窗弹出
  1. @Entry
  2. @Component
  3. struct CustomDialogPage {
  4.   @State answer: string = '?'
  5.   controller: CustomDialogController = new CustomDialogController({
  6.     builder: TextInputDialog({
  7.       confirm: (value) => {
  8.         this.answer = value;
  9.       }
  10.     }),
  11.     alignment: DialogAlignment.Bottom,
  12.     offset: { dx: 0, dy: -30 }
  13.   })
  14.  
  15.   build() {
  16.     Column({ space: 50 }) {
  17.       Row() {
  18.         Text('1+1=')
  19.           .fontWeight(FontWeight.Bold)
  20.           .fontSize(30)
  21.         Text(this.answer)
  22.           .fontWeight(FontWeight.Bold)
  23.           .fontSize(30)
  24.       }
  25.  
  26.       Button('作答')
  27.         .onClick(() => {
  28.           this.controller.open();
  29.         })
  30.     }.width('100%')
  31.     .height('100%')
  32.     .justifyContent(FlexAlign.Center)
  33.   }
  34. }
  35.  
  36.  
  37. @CustomDialog
  38. struct TextInputDialog {
  39.   controller: CustomDialogController = new CustomDialogController({ builder: TextInputDialog() })
  40.   confirm: (value: string) => void;
  41.   value: string = '';
  42.  
  43.   build() {
  44.     Column({ space: 20 }) {
  45.       Text('请输入你的答案')
  46.       TextInput({ placeholder: '请输入数字' })
  47.         .type(InputType.Number)
  48.         .onChange((value) => {
  49.           this.value = value;
  50.         })
  51.       Row({ space: 50 }) {
  52.         Button('取消')
  53.           .onClick(() => {
  54.             this.controller.close();
  55.           })
  56.         Button('确认').onClick(() => {
  57.           this.confirm(this.value);
  58.           this.controller.close();
  59.         })
  60.       }
  61.     }.padding(20)
  62.   }
  63. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/305068
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号