HarmonyOS ArkTS 应用添加弹窗（八）

news2025/1/11 14:21:50

概述

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

在这里插入图片描述

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

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

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

在这里插入图片描述

此外，如果上述弹窗还不能满足您的需求，或者需要对弹窗的布局和样式进行自定义，您还可以使用自定义弹窗CustomDialog。

下文将分别介绍AlertDialog 、TextPickerDialog 、DatePickerDialog以及CustomDialog的使用。

警告弹窗

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

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

在这里插入图片描述

以下示例代码，演示了如何使用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() {...}
}

2、 创建弹窗组件。

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();
          })
      }
    }
  }
}

3、 使用自定义弹窗。

在自定义弹窗的使用页面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/1240843.html

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

相关文章

基于金枪鱼群算法优化概率神经网络PNN的分类预测 - 附代码

基于金枪鱼群算法优化概率神经网络PNN的分类预测 - 附代码

基于金枪鱼群算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于金枪鱼群算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于金枪鱼群优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要：针对PNN神…
阅读更多...
oracle “ORA-25153:临时表空间为空”

oracle “ORA-25153:临时表空间为空”

从生产上面备份出来了一个数据库，应用在使用时显示ORA-25153临时表空间为空的报错，原因一般是数据库迁移时，没有迁移完整造成的 解决方法 1.创建新的临时表空间temp2 create temporary tablespace temp2 tempfile DATA size 100M autoexten…
阅读更多...
通过AX6000路由器，实现外部访问内网的任意主机

通过AX6000路由器，实现外部访问内网的任意主机

概述 这里遇到一个场景，就是需要外部的人员，访问我内网的一台设备，进行内外部的设备联调。 这也是实际环境中，很常见的一种场景。 之前的做法是子设备上运行edge节点，可以直接访问。 但有的设备无法运行edge节点，那么可以参考一下这个方案来实现。 此方案可以摒弃了…
阅读更多...
OpenAI再次与Sam Altman谈判；ChatGPT Voice正式上线

OpenAI再次与Sam Altman谈判；ChatGPT Voice正式上线

11月22日，金融时报消息，OpenAI迫于超过700名员工联名信的压力，再次启动了与Sam Altman的谈判，希望他回归董事会。 在Sam确定加入微软后，OpenAI超700名员工签署了一封联名信，要求Sam和Greg Brockman&#x…
阅读更多...
从0开始学习JavaScript--JavaScript迭代器

从0开始学习JavaScript--JavaScript迭代器

JavaScript迭代器（Iterator）是一种强大的编程工具，它提供了一种统一的方式来遍历不同数据结构中的元素。本文将深入探讨JavaScript迭代器的基本概念、用法，并通过丰富的示例代码展示其在实际应用中的灵活性和强大功能。 迭代器的…
阅读更多...
本地训练,开箱可用,Bert-VITS2 V2.0.2版本本地基于现有数据集训练(原神刻晴)

本地训练,开箱可用,Bert-VITS2 V2.0.2版本本地基于现有数据集训练(原神刻晴)

按照固有思维方式，深度学习的训练环节应该在云端，毕竟本地硬件条件有限。但事实上，在语音识别和自然语言处理层面，即使相对较少的数据量也可以训练出高性能的模型，对于预算有限的同学们来说，也没必要花冤枉…
阅读更多...
如何用惯性动作捕捉系统，快速创建数字人三维动画？

如何用惯性动作捕捉系统，快速创建数字人三维动画？

在动画制作领域，惯性动作捕捉技术已经逐渐成为一种重要的制作手段。通过动捕设备能够将动捕演员真实的动作转化为数字数据，然后在动画中再现这些动作。为了创造出逼真、流畅的数字人动画，惯性动作捕捉系统成为了一大工具。 根据采集方式的不…
阅读更多...
【计算机网络笔记】路由算法之层次路由

【计算机网络笔记】路由算法之层次路由

系列文章目录 什么是计算机网络？ 什么是网络协议？ 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能（1）——速率、带宽、延迟 计算机网络性能（2）…
阅读更多...
2023年亚太地区数学建模大赛 问题B

2023年亚太地区数学建模大赛 问题B

玻璃温室中的微气候法规 温室作物的产量受到各种气候因素的影响，包括温度、湿度和风速[1]。其中，适宜的温度和风速是植物生长[2]的关键。为了调节玻璃温室内的温度、风速等气候因素，温室的设计通常采用带有温室风扇的通风系统，如…
阅读更多...
《数学之美》第三版的读书笔记一、主要是马尔可夫假设、隐马尔可夫模型、图论深度/广度、PageRank相关算法、TF-IDF词频算法

《数学之美》第三版的读书笔记一、主要是马尔可夫假设、隐马尔可夫模型、图论深度/广度、PageRank相关算法、TF-IDF词频算法

1、马尔可夫假设 从19世纪到20世纪初，俄国有个数学家叫马尔可夫他提出了一种方法，假设任意一个词出现的概率只同它前面的词有关。这种假设在数学上称为马尔可夫假设。 2、二元组的相对频度 利用条件概率的公式，某个句子出现的概率等于每一个词出现的条件概率相乘，于是可展…
阅读更多...
2023亚太杯数学建模B题思路 - 玻璃温室中的微气候法规

2023亚太杯数学建模B题思路 - 玻璃温室中的微气候法规

# 1 赛题 问题B 玻璃温室中的微气候法规 温室作物的产量受到各种气候因素的影响，包括温度、湿度和风速[1]。其中，适 宜的温度和风速是植物生长[2]的关键。为了调节玻璃温室内的温度、风速等气候因素 , 温室的设计通常采用带有温室风扇的通风系统&#x…
阅读更多...
minio集群部署（k8s内）

minio集群部署（k8s内）

一、前言 minio的部署有几种方式，分别是单节点单磁盘，单节点多磁盘，多节点多磁盘三种方式，本次部署使用多节点多磁盘的方式进行部署，minio集群多节点部署最低要求需要4个节点，集群扩容时也是要求扩容的节点…
阅读更多...
GPIO模式详解：推挽/开漏/浮空/上拉/下拉/施密特(迟滞)输入

GPIO模式详解：推挽/开漏/浮空/上拉/下拉/施密特(迟滞)输入

GPIO(General Purpose Input Output)可用于执行数字输入或输出功能。典型的应用包括从/向模拟或数字传感器/设备读写数值、驱动LED、为I2C通信驱动时钟、生成外部组件的触发、发出中断等。 文章目录 1 GPIO简介2 输出模式2.1 推挽输出2.2 开漏输出 3 输入模式3.1 高阻态(浮空)、…
阅读更多...
2023亚太杯数学建模B题思路分析 - 玻璃温室中的微气候法规

2023亚太杯数学建模B题思路分析 - 玻璃温室中的微气候法规

1 赛题 问题B 玻璃温室中的微气候法规 温室作物的产量受到各种气候因素的影响，包括温度、湿度和风速[1]。其中，适 宜的温度和风速是植物生长[2]的关键。为了调节玻璃温室内的温度、风速等气候因素 , 温室的设计通常采用带有温室风扇的通风系统&#xf…
阅读更多...
Pycharm的程序调试

Pycharm的程序调试

有如下代码需要进行调试&#xff1a; i 1 while i < 10:print(i)步骤一&#xff1a;设置断点 步骤二&#xff1a;进入调试视图 方式1&#xff1a;右键单击编辑区&#xff1a;点击’Debug模块名’ ​ 方式2&#xff1a;ShiftF9 ​ 方式3&#xff1a;单机工具栏上的调试按钮…
阅读更多...
Matlab进阶绘图第33期—双曲面图

Matlab进阶绘图第33期—双曲面图

在《Matlab论文插图绘制模板第56期—曲面图&#xff08;Surf&#xff09;》中&#xff0c;我分享过曲面图的绘制模板。 然而&#xff0c;有的时候&#xff0c;需要在一张图上绘制两个及以上的曲面图&#xff0c;且每个曲面图使用不同的配色方案。 在Matlab中&#xff0c;一张…
阅读更多...
everything排除目录

everything排除目录

everything默认搜索所有文件&#xff0c;自己把没啥必要的目录都屏蔽掉&#xff0c;记录如下
阅读更多...
K8s实战RestartPoliy策略

K8s实战RestartPoliy策略

一、默认策略为Always cmd.yaml apiVersion: v1 kind: Pod metadata:name: myapp-pod labels:app: myapp spec: containers:- name: myapp-container image: busyboxcommand: [sh, -c, echo OK!&& sleep 60]首先我们根据这个yaml创建一个测试的pod 执行命令 kubec…
阅读更多...
轻量封装WebGPU渲染系统示例＜38＞- 动态构建WGSL材质Shader(源码)

轻量封装WebGPU渲染系统示例＜38＞- 动态构建WGSL材质Shader(源码)

实现原理: 基于宏定义和WGSL功能文件实现 当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/DynamicShaderBuilding.ts 当前示例运行效果: 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下&#x…
阅读更多...
内存可见性与指令重排序

内存可见性与指令重排序

文章目录 内存可见性内存可见性问题代码演示JMM&#xff08;Java Memory Model&#xff09; 指令重排序指令重排序问题代码演示指令重排序分析 volatile关键字volatile 保证内存可见性 & 禁止指令重排序volatile 不保证原子性 在上一节介绍线程安全问题的过程中&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023