HarmonyOS ArkTS 应用添加弹窗(八)

概述

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

在这里插入图片描述

弹窗是一种模态窗口,通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前,用户无法操作其他界面内容。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();
        }
      })
    ...
  }
}

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

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

相关文章

电商数据采集|电商API接口接入|从京东平台获取商品SKU 主图 价格 详情数据

在进行API开发过程中,数据异常常常令人头痛。我们的API开车软件经过精心设计和测试,能够准确识别并及时处理各类数据异常。拥有稳定的运行环境,保障了您的开发进程不受干扰,让您的工作更加顺畅高效。 京东获得JD商品详情 API 返…

如何判断交流回馈老化测试负载是否合格?

交流回馈老化测试负载是用于模拟实际工作环境中设备运行状态的测试工具,主要用于检测设备的耐久性和稳定性。 负载性能:需要检查负载的性能是否符合设计要求,这包括负载的功率、电流、电压等参数是否在规定的范围内,以及负载的工作…

信号功率放大器的工作原理和特点是什么

信号功率放大器是一种电子设备,用于将输入信号的功率进行放大,以达到所需的输出功率水平。它在各个领域中都有广泛的应用,包括音频放大器、射频放大器、激光功率放大器等。下面将详细介绍信号功率放大器的工作原理和特点。 工作原理&#xff…

什么是高防IP?如何进行防护?怎样隐藏源站?

高防IP是针对互联网服务器遭受大流量的DDoS攻击后导致服务不可用的情况下,推出的付费增值服务,是目前最常用的一种防御DDoS攻击的手段。用户在数据不转移的情况下,就可以通过配置高防IP,将攻击流量引流到高防IP,防护系…

redis-cluster集群

redis-cluster集群 redis3.0引入的分布式存储方案 集群由多个node节点组成,redis数据分布在这些节点之中 在集群之中分为主节点和从节点 集群模式当中,主从一一对应,数据写入和读取与主从模式一样,主负责写,从只能读…

echarts的横向柱状图文字省略,鼠标移入显示内容 vue3

效果图 文字省略 提示 如果是在x轴上的,就在x轴上添加triggerEvent: true,如果是y轴就在y轴添加,我是在y轴上添加的 并且自定义的方法(我取名为extension) // echarts 横向省略文字 鼠标移入显示内容 export const extension…

[MySQL-基础]SQL语句

目录 hello! 这里是欧_aita的频道。 今日语录: 只有放弃才是真正的失败。 祝福语:愿你的代码生活充满注释,逻辑清晰,debug之路畅通无阻。 大家可以在评论区畅所欲言,可以指出我的错误,在交流中共同进步。 欢迎关注我的…

基于 Modbus 的工业数据采集、控制(part 3)

Modbus 设备(利用 slave 模拟) Modbus 采集程序 client.c #include "client.h"modbus_t *ctx; key_t key_shm, key_msg; int shmid, msgid; struct shm *shm0; struct msgbuf msg0;void *collector(void *arg) {struct shm *p = (struct shm *)arg;while (1){sle…

目前比较好用的护眼台灯?央视公认好用的五款护眼台灯推荐

据国家卫健委最新数据,2020年我国儿童青少年总体近视率是52.7%,幼儿园(数据仅覆盖大班)近视率达14.3%,小学阶段35.6%,初中阶段71.1%,而高中阶段达…

运维 在Windows上搭建小型Git服务

文章目录 1、Git选型1.1、主要特性1.2、代码管理1.3、工单管理1.4、Pull/Merge requests1.5、第三方集成1.6、选型结论 2、环境搭建2.1、Gitea下载2.2、Gitea安装2.3、配置服务信息2.4、运行服务2.5、注册Gitea为服务2.6、正常使用 1、Git选型 1.1、主要特性 1.2、代码管理 1.…

创建vue项目体验

文章目录 使用vue-cli创建vue项目创建出的项目目录结构配置router 运行问题router未找到eslint报错 首页显示单页面内容替换 使用vue-cli创建vue项目 安装vue-cli,创建基本项目 选择步骤 一般创建成功后,提示使用下面的指令运行demo npm run serve创建…

发挥云计算潜力:Amazon Lightsail 与 Amazon EC2 的综述

文章作者:Libai 欢迎来到云计算世界,这里有无数的机会和无限的应用程序增长。 在当今的数字时代,企业可能会发现管理基础架构和扩展应用程序具有挑战性。 传统的本地解决方案需要大量的硬件、软件和维护前期投资。 要满足不断增长的需求&…

Vatee万腾数字引领未来:vatee科技力量的独特路径

在当今数字化浪潮的推动下,Vatee万腾以其卓越的科技力量,正引领着未来的数字化时代,描绘着一条独特的发展路径。通过持续创新、前瞻思维和对技术的深度理解,Vatee万腾正在为未来的科技发展创造新的可能性,塑造着数字引…

节能灯和led灯哪个更护眼?精选高品质的LED护眼台灯

节能灯和LED灯相比,我认为LED灯会更加护眼一些,不过想要更护眼建议选择LED的护眼台灯会更好! 大家都知道光亮对于我们来说是非常重要的,尤其是夜晚的时候,往往要借助一些灯具来提供充足的照明。对于孩子而言&#xff0…

小型洗衣机哪个牌子好用又耐用?最好用的迷你洗衣机

随着大家工作的压力越来越大,下了班之后只能想躺平,在洗完澡之后看着还需要手洗的内衣裤真的很头疼。有些小伙伴还有会攒几天再丢进去洗衣机里面一起,而且这样子是非常不好的,用过的内衣裤长时间不清洗容易滋生细菌,而…

qq录屏怎么只录电脑声音?我来告诉你答案

录制屏幕已成为人们日常生活中经常需要使用的功能,尤其是录制电脑声音。qq作为国内最受欢迎的社交软件之一,其内置的录屏功能十分便捷,可以满足用户的基本需求。可是您知道qq录屏怎么只录电脑声音吗?在本文中,我们将详…

深入理解JMM以及并发三大特性(1)

文章目录 1. 并发与并行2. JMM3. 并发三大特性4.总结 1. 并发与并行 并行:指在同一时刻,有多条指令在多个处理器上同时执行。所以无论从微观还是宏观来看,二者都是一起执行的。 并发:指在同一时刻只能有一个指令执行,…

2023年【道路运输企业安全生产管理人员】模拟试题及道路运输企业安全生产管理人员作业考试题库

题库来源:安全生产模拟考试一点通公众号小程序 2023年道路运输企业安全生产管理人员模拟试题为正在备考道路运输企业安全生产管理人员操作证的学员准备的理论考试专题,每个月更新的道路运输企业安全生产管理人员作业考试题库祝您顺利通过道路运输企业安…

FreeRTOS源码阅读笔记5--mutex

互斥量是一种特殊的二值信号量,拥有优先级继承的机制,所以适合用在临界资源互斥访问。 5.1创建互斥量xSemaphoreCreateMutex() 5.1.1函数原型 5.1.2函数框架 5.2创建递归互斥量xSemaphoreCreateRecursiveMutex() 5.2.1函数原型 5.2.2函数框架 xSemaph…

金融众筹模式系统源码 适合创业孵化机构+天使投资机构+投资基金会等 附带完整的搭建教程

随着互联网技术的发展和金融市场的开放,金融众筹模式逐渐成为一种新型的融资方式。这种模式通过互联网平台聚集大量投资者,共同参与到一个项目中,为项目提供资金支持,最终获得投资回报。今天罗峰给大家分享一款金融众筹模式系统源…