鸿蒙ArkUI开发-应用添加弹窗

news2024/12/28 6:02:28

在我们日常使用应用的时候，可能会进行一些敏感的操作，比如删除联系人，这时候我们给应用添加弹窗来提示用户是否需要执行该操作，如下图所示：

弹窗是一种模态窗口，通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前，用户无法操作其他界面内容。ArkUI为我们提供了丰富的弹窗功能，弹窗按照功能可以分为以下两类：

  • 确认类：例如警告弹窗AlertDialog。
  • 选择类：包括文本选择弹窗TextPickerDialog 、日期滑动选择弹窗DatePickerDialog、时间滑动选择弹窗TimePickerDialog等。

您可以根据业务场景，选择不同类型的弹窗。部分弹窗效果图如下：

此外，如果上述弹窗还不能满足您的需求，或者需要对弹窗的布局和样式进行自定义，您还可以使用自定义弹窗CustomDialog。 下文将分别介绍AlertDialog 、TextPickerDialog 、DatePickerDialog以及CustomDialog的使用。

警告弹窗

警告弹窗AlertDialog由以下三部分区域构成，对应下面的示意图：

  1. 标题区：为可选的。
  2. 内容区：显示提示消息。
  3. 操作按钮区：用户做”确认“或者”取消“等操作。

以下示例代码，演示了如何使用AlertDialog 实现上图所示的警告弹窗。AlertDialog可以设置两个操作按钮，示例代码中分别使用primaryButton和secondaryButton实现了“取消”和“删除”操作按钮，操作按钮可以通过action响应点击事件。

Button('点击显示弹窗')
  .onClick(() => {
    AlertDialog.show(
      {
        title: '删除联系人', // 标题
        message: '是否需要删除所选联系人?', // 内容
        autoCancel: false, // 点击遮障层时，是否关闭弹窗。
        alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
        offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
        primaryButton: {
          value: '取消',
          action: () => {
 console.info('Callback when the first button is clicked');
          }
        },
        secondaryButton: {
          value: '删除',
          fontColor: '#D94838',
          action: () => {
 console.info('Callback when the second button is clicked');
          }
        },
        cancel: () => { // 点击遮障层关闭dialog时的回调
 console.info('Closed callbacks');
        }
      }
    )
  })

此外，您还可以使用AlertDialog，构建只包含一个操作按钮的确认弹窗，使用confirm响应操作按钮回调。

AlertDialog.show(
  {
    title: '提示',
    message: '提示信息',
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    confirm: {
      value: '确认',
      action: () => {
 console.info('Callback when confirm button is clicked');
      }
    },
    cancel: () => {
 console.info('Closed callbacks')
    }
  }
)

选择类弹窗

选择类弹窗用于方便用户选择相关数据，比如选择喜欢吃的水果、出生日期等等。下面我们以TextPickerDialog和DatePickerDialog为例，来介绍选择类弹窗的使用。

文本选择弹窗

TextPickerDialog为文本滑动选择器弹窗，根据指定的选择范围创建文本选择器，展示在弹窗上，例如下面这段示例代码使用TextPickerDialog实现了一个水果选择弹窗。示例代码中使用selected指定了弹窗的初始选择项索引为2，对应的数据为“香蕉”。当用户点击“确定”操作按钮后，会触发onAccept事件回调，在回调中将选中的值，传递给宿主中的select变量。

@Entry
@Component
struct TextPickerDialogDemo {
 @State select: number = 2;
 private fruits: string[] = ['苹果', '橘子', '香蕉', '猕猴桃', '西瓜'];
 
 build() {
 Column() {
      Button('TextPickerDialog')
        .margin(20)
        .onClick(() => {
          TextPickerDialog.show({
 range: this.fruits, // 设置文本选择器的选择范围
 selected: this.select, // 设置初始选中项的索引值。
 onAccept: (value: TextPickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调。
 // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
 this.select = value.index;
 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
            },
 onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调。
 console.info("TextPickerDialog:onCancel()");
            },
 onChange: (value: TextPickerResult) => { // 滑动弹窗中的选择器使当前选中项改变时触发该回调。
 console.info('TextPickerDialog:onChange()' + JSON.stringify(value));
            }
          })
        })
    }
    .width('100%')
  }
}

效果图如下：

日期选择弹窗

下面我们介绍另一种常用的选择类弹窗DatePickerDialog，它是日期滑动选择器弹窗，根据指定的日期范围创建日期滑动选择器，展示在弹窗上。DatePickerDialog的使用非常广泛，比如当我们需要输入个人出生日期的时候，就可以使用DatePickerDialog。下面的示例代码实现了一个日期选择弹窗：

@Entry
@Component
struct DatePickerDialogDemo {
 selectedDate: Date = new Date('2010-1-1');
 
 build() {
 Column() {
      Button("DatePickerDialog")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({
 start: new Date('1900-1-1'), // 设置选择器的起始日期
 end: new Date('2023-12-31'), // 设置选择器的结束日期
 selected: this.selectedDate, // 设置当前选中的日期
 lunar: false,
 onAccept: (value: DatePickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调
 // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
 this.selectedDate.setFullYear(value.year, value.month, value.day)
 console.info('DatePickerDialog:onAccept()' + JSON.stringify(value))
            },
 onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调
 console.info('DatePickerDialog:onCancel()')
            },
 onChange: (value: DatePickerResult) => { // 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调
 console.info('DatePickerDialog:onChange()' + JSON.stringify(value))
            }
          })
        })
    }
    .width('100%')
  }
}

效果图如下：

自定义弹窗

自定义弹窗的使用更加灵活，适用于更多的业务场景，在自定义弹窗中您可以自定义弹窗内容，构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现，然后结合CustomDialogController来控制自定义弹窗的显示和隐藏。下面我们通过一个兴趣爱好的选择框来介绍自定义弹窗的使用。

从上面的效果图可以看出，这个选择框是一个多选的列表弹窗，我们可以使用装饰器@CustomDialog，结合List组件来完成这个弹窗布局，实现步骤如下：

  1. 初始化弹窗数据。先准备好资源文件和数据实体类。其中资源文件stringarray.json创建在resources/base/element目录下，文件根节点为strarray。
{
 "strarray": [
    {
 "name": "hobbies_data",
 "value": [
        {
 "value": "Soccer"
        },
        {
 "value": "Badminton"
        },
        {
 "value": "Travelling"
        },
        ... 
      ]
    }
  ]
}

实体类HobbyBean用来封装自定义弹窗中的"兴趣爱好"数据。

export default class HobbyBean {
 label: string;
 isChecked: boolean;
}

然后创建一个ArkTS文件CustomDialogWidget，用来封装自定义弹窗，使用装饰器@CustomDialog修饰CustomDialogWidget表示这是一个自定义弹窗。使用资源管理对象manager获取数据，并将数据封装到hobbyBeans。

@CustomDialog
export default struct CustomDialogWidget {
 @State hobbyBeans: HobbyBean[] = [];
 
 aboutToAppear() {
 let context: Context = getContext(this);
 let manager = context.resourceManager;
    manager.getStringArrayValue($r('app.strarray.hobbies_data'), (error, hobbyResult) => {
      ...
      hobbyResult.forEach((hobbyItem: string) => {
 let hobbyBean = new HobbyBean();
        hobbyBean.label = hobbyItem;
        hobbyBean.isChecked = false;
 this.hobbyBeans.push(hobbyBean);
      });
    });
  }
 
 build() {...}
}
  1. 创建弹窗组件。controller对象用于控制弹窗的控制和隐藏，hobbies表示弹窗选中的数据结果。setHobbiesValue方法用于筛选出被选中的数据，赋值给hobbies。
@CustomDialog
export default struct CustomDialogWidget {
 @State hobbyBeans: HobbyBean[] = [];
 @Link hobbies: string;
 private controller?: CustomDialogController;
 
 aboutToAppear() {...}
 
 setHobbiesValue(hobbyBeans: HobbyBean[]) {
 let hobbiesText: string = '';
    hobbiesText = hobbyBeans.filter((isCheckItem: HobbyBean) =>
    isCheckItem?.isChecked)
      .map((checkedItem: HobbyBean) => {
 return checkedItem.label;
      }).join(',');
 this.hobbies = hobbiesText;
  }
 
 build() {
 Column() {
      Text($r('app.string.text_title_hobbies'))...
 List() {
        ForEach(this.hobbyBeans, (itemHobby: HobbyBean) => {
 ListItem() {
 Row() {
              Text(itemHobby.label)...
              Toggle({ type: ToggleType.Checkbox, isOn: false })...
                .onChange((isCheck) => {
                  itemHobby.isChecked = isCheck;
                })
            }
          }
        }, itemHobby => itemHobby.label)
      }
 
 Row() {
        Button($r('app.string.cancel_button'))...
          .onClick(() => {
 this.controller?.close();
          })
        Button($r('app.string.definite_button'))...
          .onClick(() => {
 this.setHobbiesValue(this.hobbyBeans);
 this.controller?.close();
          })
      }
    }
  }
}
  1. 使用自定义弹窗。在自定义弹窗的使用页面HomePage中先定义一个变量hobbies，使用装饰器@State修饰，和自定义弹窗中的@Link 装饰器修饰的变量进行双向绑定。然后我们使用alignment和offset设置弹窗的位置在屏幕底部，并且距离底部20vp。最后我们在自定义组件TextCommonWidget（具体实现可以参考《构建多种样式弹窗》Codelab源码）的点击事件中，调用customDialogController的open方法，用于显示弹窗。
@Entry
@Component
struct HomePage {
 customDialogController: CustomDialogController = new CustomDialogController({
 builder: CustomDialogWidget({
 onConfirm: this.setHobbiesValue.bind(this),
    }),
 alignment: DialogAlignment.Bottom,
 customStyle: true,
 offset: { dx: 0,dy: -20 }
  });
 
 setHobbiesValue(hobbyArray: HobbyBean[]) {...}
 
 build() {
    ...
      TextCommonWidget({
        ...
 title: $r('app.string.title_hobbies'),
 content: $hobby,
 onItemClick: () => {
 this.customDialogController.open();
        }
      })
    ...
  }
}

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

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

相关文章

智能体AI Agent的极速入门：从ReAct到AutoGPT、QwenAgent、XAgent

智能体AI Agent的极速入门：从ReAct到AutoGPT、QwenAgent、XAgent

前言 如这两天在微博上所说，除了已经在七月官网上线的AIGC模特生成系统外，我正在并行带多个项目组 第二项目组，论文审稿GPT第2版的效果已经超过了GPT4，详见《七月论文审稿GPT第2版：用一万多条paper-review数据集微调…
阅读更多...
PBM模型学习（二）Discrete离散方法

PBM模型学习（二）Discrete离散方法

1.Discreate离散方法主要涉及Bins的分区、粒径设置、颗粒粒径、Phenomena,如下图所示： ## 2.重要参数设置 Bins分区 Bins表示将颗粒分成了几份 也就是说在PBM模型中，颗粒粒径是离散的，比如实际的颗粒粒径可能是0.001m-0.01m范围内，那么颗粒在这个范围内粒径应该是比较连续…
阅读更多...
幻兽帕鲁游戏服务器搭建by阿里云服务器4核16G和32G配置价格表

幻兽帕鲁游戏服务器搭建by阿里云服务器4核16G和32G配置价格表

如何自建幻兽帕鲁服务器？基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了，一看就懂系列。本文是利用OOS中幻兽帕鲁扩展程序来一键部署幻兽帕鲁服务器，阿里云百科aliyunbaike.com分享官方基于阿里云服务器快速创建幻兽帕鲁服务器教程&…
阅读更多...
C++初阶--list

C++初阶--list

list C的list是标准模板库中的一个容器&#xff0c;用于存储和管理元素的双向链表。提供了一系列访问和修改数据的函数&#xff1b; 使用时需要包含头文件 #include< list > 下面演示下它的一些基础功能 使用list list的遍历 int main() {list<int> lt;lt.push_…
阅读更多...
机器学习实验4——CNN卷积神经网络分类Minst数据集

机器学习实验4——CNN卷积神经网络分类Minst数据集

文章目录 &#x1f9e1;&#x1f9e1;实验内容&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1; 原理&#x1f9e1;&#x1f9e1;&#x1f9e1;&#x1f9e1;CNN实现分类Minst&#x1f9e1;&#x1f9e1;代码数据预处理&#xff1a;设置基本参数&#xff1a; &#x1f9e…
阅读更多...
JVM实战（34）——内存溢出之消息队列处理不当

JVM实战（34）——内存溢出之消息队列处理不当

一、简介 本章&#xff0c;我们将介绍一个因为处理消息队列中的数据不当而引起的内存溢出问题&#xff0c;先来看下系统的背景。 1.1 系统背景 这是一个线上的数据同步系统&#xff0c;专门从Kafka消费其它系统送进去的数据&#xff0c;处理后存储到自己的数据库中&#xff1…
阅读更多...
算法------（10）堆

算法------（10）堆

例题&#xff1a;&#xff08;1&#xff09;AcWing 838. 堆排序 我们可以利用一个一维数组来模拟堆。由于堆本质上是一个完全二叉树&#xff0c;他的每个父节点的权值都小于左右子节点&#xff0c;而每个父节点编号为n时&#xff0c;左节点编号为2*n&#xff0c;右节点编号为2*…
阅读更多...
智慧应急消防柜的作用

智慧应急消防柜的作用

在现代社会&#xff0c;科技的不断进步带来了许多便利与改变。智能化的产品不仅给我们的生活带来了便捷&#xff0c;也让我们对各个领域的发展有了更高的期待。而在这种场景下&#xff0c;智慧应急消防柜作为智慧城市新型基础设施的必备品&#xff0c;正逐渐受到更多关注。 智能…
阅读更多...
利用ADS建立MIPI D-PHY链路仿真流程

利用ADS建立MIPI D-PHY链路仿真流程

根据MIPI D-PHY v1.2规范中对于互连电气参数的定义，本次仿真实例中，需要重点关注如下的设计参数： 1. 差分信号的插入损耗Sddij和回拨损耗Sddii； 2. 模式转换损耗Sdcxx、Scdxx； 3. 数据线与时钟线之间的串扰耦合（远、近端）。 设计者还可以结合CTS中的补充…
阅读更多...
抓包工具fiddler看完你就懂了

抓包工具fiddler看完你就懂了

一、简介 fiddler是位于客户端和服务端之间的http代理 1、作用 监控浏览器所有的http/https流量查看、分析请求内容细节伪造客户端请求和服务器请求测试网站的性能解密https的web会话全局、局部断电功能第三方插件 2、使用场景 接口调试、接口测试、线上环境调试、web性能分…
阅读更多...
驱动开发-系统移植

驱动开发-系统移植

一、Linux系统移植概念 需要移植三部分东西&#xff0c;Uboot ,内核 &#xff0c;根文件系统 &#xff08;rootfs&#xff09; &#xff0c;这三个构成了一个完整的Linux系统。 把这三部分学明白&#xff0c;系统移植就懂点了。 二、Uboot uboot就是引导程序下载的一段代…
阅读更多...
爬取樱花动漫名侦探柯南最新剧场版ts格式

爬取樱花动漫名侦探柯南最新剧场版ts格式

import os import requests import zipfile from tqdm import tqdm import tkinter as tkfilename 名侦探柯南\\ if not os.path.exists(filename):os.mkdir(filename) # https://vip.ffzy-online6.com/20231129/22304_740e70d0/2000k/hls/cedd2dc1ecb000001.ts # https://vip…
阅读更多...
开源无代码应用程序生成器Saltcorn

开源无代码应用程序生成器Saltcorn

什么是 Saltcorn &#xff1f; Saltcorn 是一个无需编写任何代码即可构建数据库 Web 应用程序的平台。它配备了一个吸睛的仪表板&#xff0c;丰富的生态系统、视图生成器以及支持主题的界面&#xff0c;使用直观的点击、拖放用户界面来构建整个应用程序。 软件的特点&#xff1…
阅读更多...
【漏洞复现】艺创科技智能营销路由器后台命令执行漏洞

【漏洞复现】艺创科技智能营销路由器后台命令执行漏洞

Nx01 产品简介 成都艺创科技有限公司&#xff0c;成立于2011年&#xff0c;位于四川省成都市&#xff0c;是一家以从事研究和试验发展为主的企业。企业注册资本1000万人民币&#xff0c;实缴资本50万人民币。 Nx02 漏洞描述 成都艺创科技有限公司智能营销路由器存在默认口令(…
阅读更多...
QT+VS实现Kmeans聚类算法

QT+VS实现Kmeans聚类算法

1、Kmeans的定义 聚类是一个将数据集中在某些方面相似的数据成员进行分类组织的过程&#xff0c;聚类就是一种发现这种内在结构的技术&#xff0c;聚类技术经常被称为无监督学习。k均值聚类是最著名的划分聚类算法&#xff0c;由于简洁和效率使得他成为所有聚类算法中最广泛使…
阅读更多...
数位dp，HDU 4151 The Special Number

数位dp，HDU 4151 The Special Number

一、题目 1、题目描述 In this problem, we assume the positive integer with the following properties are called ‘the special number’: 1) The special number is a non-negative integer without any leading zero. 2) The numbers in every digit of the special nu…
阅读更多...
RCE 漏洞审计

RCE 漏洞审计

Command Injection 命令注入&#xff08;Command Injection&#xff09;是一种安全漏洞&#xff0c;命令注入攻击的目的是&#xff0c;在易受攻击的应用程序中注入和执行攻击者指定的命令。在这种情况下&#xff0c;执行不需要的系统命令的应用程序就像一个伪系统外壳&#xff…
阅读更多...
无线监测终端引领文物保护和管理新篇章

无线监测终端引领文物保护和管理新篇章

一、文物预防性保护系统大升级 随着科技的不断发展&#xff0c;越来越多的高科技产品进入人们的生活和工作中。在文物保护和管理行业&#xff0c;无线监测终端大放异彩。免布线、即插即用的特点在提供方便的同时&#xff0c;也为文物的长久保存和有效管理带来更好的保护环境。…
阅读更多...
兼容树莓派扩展模块，专注工业产品开发的瑞米派强势来袭

兼容树莓派扩展模块，专注工业产品开发的瑞米派强势来袭

近日&#xff0c;米尔电子和瑞萨电子共同定义和开发了瑞萨第一款MPU生态开发板——瑞米派&#xff08;Remi Pi&#xff09;正式上市了&#xff01;在各种Pi板卡琳琅满目的当下&#xff0c;Remi Pi是一款与众不同的开发板&#xff0c;他兼顾了严肃产品开发和爱好者创意实现两种需…
阅读更多...
ffmpeg和opencv一些容易影响图片清晰度的操作

ffmpeg和opencv一些容易影响图片清晰度的操作

ffmpeg 转视频或者图片&#xff0c;不指定码率清晰度会下降 ffmpeg -i xxx.png xxx.mp4 码率也叫比特率&#xff08;Bit rate&#xff09;(也叫数据率)是一个确定整体视频/音频质量的参数&#xff0c;秒为单位处理的字节数&#xff0c;码率和视频质量成正比&#xff0c;在视频…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023