【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— 弹窗组件

简介

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

下面是所有涉及到的弹窗组件官方文档，请一切以官方文档为准

警告对话弹框 官方文档

操作列表弹框 官方文档

文本滑动选择器弹窗 官方文档

日期滑动选择期弹窗 官方文档

时间滑动选择器弹窗 官方文档

自定义弹窗 官方文档

消息提示

概述

Toast（消息提示），常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。具体效果如下
在这里插入图片描述

使用说明

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

import promptAction from '@ohos.promptAction'

showToast()方法的参数定义如下

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 = 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（日期滑动选择期弹窗）
在这里插入图片描述
给出一个案例

@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('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，具体用法可参考相关案例或者官方文档。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/464849.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

边缘计算+WEB端应用融合：AI行为识别智能监控系统搭建指南 -- 云端系统数据库设计（五）

边缘计算+WEB端应用融合：AI行为识别智能监控系统搭建指南 -- 云端系统数据库设计（五）

专栏目录 边缘计算WEB端应用融合：AI行为识别智能监控系统搭建指南 – 整体介绍（一） 边缘计算WEB端应用融合：AI行为识别智能监控系统搭建指南 – 边缘设备图像识别及部署（二） 边缘计算WEB端应用融合&#xf…
阅读更多...
研究生总结

研究生总结

Note:本博客更多是关于自己的感悟，没有翻阅文件详细查证，如果存在错过，也请提出指正。 1. 半监督回归 相比于半监督分类，半监督回归相对冷门。回归和分类之间有着难以逾越的天谴，预测精度。分类中的类别是可数的&…
阅读更多...
网络学习：ICMPV6报文

网络学习：ICMPV6报文

目录 前言： 一、ICMPV6的报文内容 二、ICMPv6差错报文分类 1、目的不可达错误报文（type1) 2、数据包过大错误报文(type2) 3、超时报文(type3) 4、参数错误报文 三、ICMPv6信息报文的分类 1、回送请求报文： 2、回送应答报文&#xf…
阅读更多...
IDEA系列软件设置自动换行

IDEA系列软件设置自动换行

以pycharm软件为例，我们在编程的时候常常会遇到这种情况，内容过长导致超出pycharm的界面，导致我们阅读浏览起来非常的不方便，对于这种情况，我们可以通过给IDEA软件设置自动换行来解决 首先打开setting，找到…
阅读更多...
ElasticSearch：数据的魔法世界

ElasticSearch：数据的魔法世界

​ 欢迎来到ElasticSearch的奇妙之旅！在这个充满魔法的搜索引擎世界中，数据不再是沉闷的数字和字母，而是变得充满活力和灵动。无论你是刚刚踏入数据探索的小白，还是已经对搜索引擎有所了解的行者，本篇博客都将为你揭示…
阅读更多...
ThingsBoard Edge 设备控制

ThingsBoard Edge 设备控制

文章目录 一、RPC 功能1.服务端 RPC2.客户端 RPC3.MQTT RPC API3.1.服务端RPC3.2.客户端RPC 二、设备控制1.环境准备2.创建设备3.服务端PRC3.1.RPC消息主题3.2.程序源码3.3.创建仪表板3.4.边缘分配仪表板3.5.测试 4.客户端RPC4.1.RPC消息主题4.2.程序源码4.3.规则链4.4.测试 Th…
阅读更多...
十四、GPT

十四、GPT

在GPT-1之前，传统的 NLP 模型往往使用大量的数据对有监督的模型进行任务相关的模型训练，但是这种有监督学习的任务存在两个缺点：预训练语言模型之GPT 需要大量的标注数据，高质量的标注数据往往很难获得，因为在很多任务…
阅读更多...
Qt for Mac阻止MacOS系统休眠

Qt for Mac阻止MacOS系统休眠

Qt开发的应用程序如果电脑休眠了会影响软件的使用，因此在软件的使用过程中需要防止电脑休眠，在Win上有专门的API进行处理，在Mac上也必需使用Mac平台自身的API，本篇介绍在Mac平台下使用Qt阻止Mac系统休眠。 要调用Mac系统的API&am…
阅读更多...
vulhub中GitLab 任意文件读取漏洞复现（CVE-2016-9086）

vulhub中GitLab 任意文件读取漏洞复现（CVE-2016-9086）

GitLab是一款Ruby开发的Git项目管理平台。在8.9版本后添加的“导出、导入项目”功能，因为没有处理好压缩包中的软连接，已登录用户可以利用这个功能读取服务器上的任意文件。 环境运行后，访问http://your-ip:8080即可查看GitLab主页&#xff0…
阅读更多...
PC电脑如何使用HDMI连接小米电视当显示屏

PC电脑如何使用HDMI连接小米电视当显示屏

使用HDMI连接好当时和电脑，HDMI2.0会更清晰；小米电视会自动弹窗提示你有HDMI 接口连接，或者你进入信号源进行选择即可；需要平时我们电脑的显示器正常连接，然后按 win p ，选择 扩展 屏幕； 进入设…
阅读更多...
27-2 文件上传漏洞 - 前端绕过

27-2 文件上传漏洞 - 前端绕过

环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 前端绕过思路 - 禁用 JavaScript: 背景： 当前开发行业大多采用前后端分离模式，后端使用多种开发语言如 PHP、Java 等，而前端主要使用 JavaScript（JS）。因此，禁用 JavaScrip…
阅读更多...
开设新量子计算中心！IonQ 全力加速量子商业化

开设新量子计算中心！IonQ 全力加速量子商业化

内容来源：量子前哨（ID：Qforepost） 编辑丨慕一 编译/排版丨浪味仙 沛贤 深度好文：1000字丨8分钟阅读 近日，量子计算公司IonQ对外宣布，将在华盛顿开设一家新量子中心。公告里还提出&#xff0c…
阅读更多...
html5黑色大气的个人博客全屏滚动个人主页源码HTML+JS+CSS

html5黑色大气的个人博客全屏滚动个人主页源码HTML+JS+CSS

html5黑色大气的个人博客全屏滚动个人主页源码HTMLJSCSS
阅读更多...
软件测试 自动化测试selenium 基础篇

软件测试 自动化测试selenium 基础篇

文章目录 1. 什么是自动化测试？1.1 自动化分类 2. 什么是 Selenium ？3. 为什么使用 Selenium ？4. Selenium 工作原理5. Selenium 环境搭建 1. 什么是自动化测试？ 将人工要做的测试工作进行转换，让代码去执行测试工作 …
阅读更多...
【Frida】04_Frida中使用TypeScript脚本（采坑）

【Frida】04_Frida中使用TypeScript脚本（采坑）

▒ 目录 ▒ 🛫 导读需求开发环境演示目标 1️⃣ 操作步骤安装node 20.10.0在 VSCode 中打开项目目录初始化一个 NodeJS 项目安装 TypeScript初始化 TypeScript 项目安装依赖配置 TypeScript编写代码编译设置编译脚本运行，查看结果 2️⃣ 采坑frida-compi…
阅读更多...
旧华硕电脑开机非常慢 电脑开机黑屏很久才显示品牌logo导致整体开机速度非常的慢怎么办

旧华硕电脑开机非常慢 电脑开机黑屏很久才显示品牌logo导致整体开机速度非常的慢怎么办

前提条件 电池需要20％（就是电池没有报废）且电脑接好电源，千万别断电，电脑会变成砖头的 解决办法 更新bios即可解决，去对应品牌官网下载最新的bios版本就行了 网上都是一些更新驱动啊
阅读更多...
深度学习 精选笔记（12）卷积神经网络-理论基础1

深度学习 精选笔记（12）卷积神经网络-理论基础1

学习参考： 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)，以达到集多方教程的精华于一文的目的。 ③非常推荐上面（学习参考&#x…
阅读更多...
JS原型和原型链的理解

JS原型和原型链的理解

原型链图，图中Parent是构造函数，p1是通过Parent实例化出来的一个对象 前置知识 js中对象和函数的关系，函数其实是对象的一种 函数、构造函数的区别，任何函数都可以作为构造函数，但是并不能将任意函数叫做构造函数&…
阅读更多...
【Godot4.2】颜色完全使用手册

【Godot4.2】颜色完全使用手册

概述 本篇简单汇总Godot中的颜色的构造和使用，内容包括了： RGB、RGBA，HSV以及HTML16进制颜色值、颜色常量等形式构造颜色颜色的运算以及取反、插值用类型化数组、紧缩数组或PNG图片形式存储多个颜色 构造颜色 因为颜色是一种视觉元素&…
阅读更多...
Vue中使用Lodash

Vue中使用Lodash

Vue中使用Lodash 前言安装Lodash引用方法vue中使用1、cloneDeep 深拷贝2、uniq 数组去重3、uniqWith 数组对象去重 isEqual 深度比对4、intersection 提取数组相同元素5、chunk 数组切分6、compact去除假值7、reject:根据条件删除指定的值8、find:查找结果的第一个值9、filter：…
阅读更多...
最新文章

Copyright @ 2022~2023