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

news2024/10/7 8:22:03

简介

弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。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，具体用法可参考相关案例或者官方文档。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

NSSCTF 403,444,2145,3845,404,445

NSSCTF 403,444,2145,3845,404,445

[SWPUCTF 2021 新生赛]简简单单的逻辑 py文件，使用pycharm打开进行分析 其中，hex()[2:]：将十进制转化为十六进制 zfill(2)：位数不足2，前补0 这里即将flag的ASCII码与key进行异或，再将每位转化为十六进制…
阅读更多...
Prism的发布和订阅

Prism的发布和订阅

首先需要设置一个发布和订阅的类 -- 这里发布和订阅的消息是string类型所以就只用PubSubEvent类 发布部分（构造函数注入，发布个“Hello”） 订阅部分： public partial class ViewC : UserControl {private readonly IEventAggrega…
阅读更多...
文件的基础

文件的基础

一、文件 什么是文件 文件流： 一、1、文件的相关操作 创建文件的三种方式： public class FileCreate {public static void main(String[] args) {}//方式1 new File(String pathname)Testpublic void create01() {String filePath "e:\\news1.…
阅读更多...
1987-2022年各省专利申请授权数据（8个指标））

1987-2022年各省专利申请授权数据（8个指标））

1987-2022年各省专利申请授权数据（8个指标）） 1、时间：1987-2023年 2、指标：国内专利申请受理量(项)、国内发明专利申请受理量(项)、国内实用新型专利申请受理量(项)、国内外观设计专利申请受理量(项)、国内专利申请授…
阅读更多...
机器学习（26）回顾gan+文献阅读

机器学习（26）回顾gan+文献阅读

文章目录 摘要Abstract一、李宏毅机器学习——GAN1. Introduce1.1 Network as Generator1.2 Why distribution 2. Generative Adversarial Network2.1 Unconditional generation2.2 Basic idea of GAN 二、文献阅读1. 题目2. abstract3. 网络架构3.1 Theoretical Results 4. 文…
阅读更多...
JavaWeb：vue、AJax、ELement、maven、SpringBoot、、Http、Tomcat、请求响应、分层解耦

JavaWeb：vue、AJax、ELement、maven、SpringBoot、、Http、Tomcat、请求响应、分层解耦

1 Vue 1.1 Vue介绍 VUE是前端框架&#xff0c;基于MVVM&#xff0c;实现数据双向绑定 框架是半基础软件&#xff0c;可重用的代码模型 1.2 Vue指令 <script src"js/vue.js"></script></head> <body><div id"id"><!--…
阅读更多...
使用 VS Code + Github 搭建个人博客

使用 VS Code + Github 搭建个人博客

搭建个人博客的方案 现在&#xff0c;搭建个人博客的方式有很多&#xff0c;门槛也很低。 可以选择已有平台&#xff1a; 掘金语雀知乎简书博客园SegmentFault… 也可以选择一些主流的博客框架&#xff0c;自行搭建。 HexoGitBookVuePressdumi… 如何选择&#xff1f; 我…
阅读更多...
es索引操作命令

es索引操作命令

索引操作 index 创建索引 put 方法创建索引 使用 put 创建索引时必须指明文档id&#xff0c;否则报错 # PUT 创建命令 # test1 索引名称 # type1 类型名称&#xff0c;默认为_doc&#xff0c;已经被废弃 # 1 文档id PUT /test1/type1/1 {"name":"zhangsan&…
阅读更多...
【C语言】内存函数~

【C语言】内存函数~

一、前言 上期我们讲解了与字符相关的函数&#xff1a;其中就有strcmp()字符串比较函数&#xff1b;strcpy()字符串拷贝函数&#xff1b;他们都能对内存进行一定的操作&#xff0c;可是却无法处理一些非字符串的数据。而这里我将介绍这四个函数&#xff1a;分别是memcpy()&…
阅读更多...
Ubuntu 16.04 设置 root 密码

Ubuntu 16.04 设置 root 密码

Ubuntu 16.04 设置 root 密码 1. sudo2. parserReferences 1. sudo sudo (/ˈsuːduː/ or /ˈsuːdoʊ/) is a program for Unix-like computer operating systems that allows users to run programs with the security privileges of another user, by default the superus…
阅读更多...
Linux下进程的调度与切换

Linux下进程的调度与切换

&#x1f30e;进程的调度与切换 文章目录&#xff1a; 进程的调度与切换 进程切换 进程调度       活动状态进程队列       位图判断       过期队列 总结 前言&#xff1a; 在Linux操作系统中&#xff0c;进程的调度与切换是操作系统核心功能之一&#xff…
阅读更多...
ViT如何支持变长序列（patches）输入？

ViT如何支持变长序列（patches）输入？

问题&#xff1a;当增加输入图像的分辨率时&#xff0c;例如DeiT 从 224 到 384&#xff0c;一般来说会保持 patch size&#xff08;例如9&#xff09;&#xff0c;因此 patch 的数量 N 会发生了变化。那么视觉transformer是如何处理变长序列输入的? 回答&#xff1a; 在讨论…
阅读更多...
鸿蒙开发学习：【驱动子系统】

鸿蒙开发学习：【驱动子系统】

OpenHarmony驱动子系统采用C面向对象编程模型构建&#xff0c;通过平台解耦、内核解耦&#xff0c;兼容不同内核&#xff0c;提供了归一化的驱动平台底座&#xff0c;旨在为开发者提供更精准、更高效的开发环境&#xff0c;力求做到一次开发&#xff0c;多系统部署。 为了缩减…
阅读更多...
go rabbitmq 操作

go rabbitmq 操作

go rabbitmq 操作 go 依赖包github.com/streadway/amqp docker快速部署 docker pull rabbitmq:management docker run -d rabbitmq:management # 先跑一个看看监听了哪些端口 docker run -d --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq #5672 go 程序连接&#x…
阅读更多...
Linux：系统初始化，内核优化，性能优化（3）

Linux：系统初始化，内核优化，性能优化（3）

优化系统的文件句柄数&#xff08;全局&#xff09; 也就是系统的最大文件数量 查看最大数量 cat /proc/sys/fs/file-max 当我们的服务器有非常大的一个数据并发的时候十几二十万的文件需要去配置&#xff0c;可能这个是远远不够的&#xff0c;我们就要去修改 vim /etc/sy…
阅读更多...
栈和队列（Java实现）

栈和队列（Java实现）

栈和队列&#xff08;Java实现&#xff09; 栈 栈(Stack)&#xff1a;栈是先进后出&#xff08;FILO, First In Last Out&#xff09;的数据结构。Java中实现栈有以下两种方式&#xff1a; stack类LinkedList实现&#xff08;继承了Deque接口&#xff09; &#xff08;1&am…
阅读更多...
使用 GitHub Actions 通过 CI/CD 简化 Flutter 应用程序开发

使用 GitHub Actions 通过 CI/CD 简化 Flutter 应用程序开发

在快节奏的移动应用程序开发世界中&#xff0c;速度、可靠性和效率是决定项目成功或失败的关键因素。持续集成和持续部署 (CI/CD) 实践已成为确保满足这些方面的强大工具。当与流行的跨平台框架 Flutter 和 GitHub Actions 的自动化功能相结合时&#xff0c;开发人员可以创建无…
阅读更多...
【GPT-SOVITS-04】SOVITS 模块-鉴别模型解析

【GPT-SOVITS-04】SOVITS 模块-鉴别模型解析

说明&#xff1a;该系列文章从本人知乎账号迁入&#xff0c;主要原因是知乎图片附件过于模糊。 知乎专栏地址&#xff1a; 语音生成专栏 系列文章地址&#xff1a; 【GPT-SOVITS-01】源码梳理 【GPT-SOVITS-02】GPT模块解析 【GPT-SOVITS-03】SOVITS 模块-生成模型解析 【G…
阅读更多...
正则表达式与re模块

正则表达式与re模块

目录 正则表达式 简介 语法&#xff1a; 常用元字符&#xff1a; 量词: 贪婪匹配和惰性匹配&#xff1a; re模块 简介&#xff1a; 常用的几个模块&#xff1a; 1.findall 2.search 3.finditer 4.compile 案例展示&#xff1a; 需求&#xff1a; 思路分析&#…
阅读更多...
Blocks —— 《Objective-C高级编程 iOS与OS X多线程和内存管理》

Blocks —— 《Objective-C高级编程 iOS与OS X多线程和内存管理》

目录 Blocks概要什么是BlocksOC转C方法关于几种变量的特点 Blocks模式Block语法Block类型 变量截获局部变量值__block说明符截获的局部变量 Blocks的实现Block的实质 Blocks概要 什么是Blocks Blocks是C语言的扩充功能&#xff0c;即带有局部变量的匿名函数。 顾名思义&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023