harmonyOS鸿蒙官网教程-添加弹窗

这篇具有很好参考价值的文章主要介绍了harmonyOS鸿蒙官网教程-添加弹窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

给应用添加弹窗

概述

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

鸿蒙弹窗提醒,HarmonyOS鸿蒙语言开发,harmonyos,学习,华为
弹窗是一种模态窗口,通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前,用户无法操作其他界面内容。ArkUI为我们提供了丰富的弹窗功能,弹窗按照功能可以分为以下两类:

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

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

鸿蒙弹窗提醒,HarmonyOS鸿蒙语言开发,harmonyos,学习,华为

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

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

警告弹窗

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

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

鸿蒙弹窗提醒,HarmonyOS鸿蒙语言开发,harmonyos,学习,华为

以下示例代码,演示了如何使用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变量。



struct TextPickerDialogDemo {
   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%')
  }
}

效果图如下:

鸿蒙弹窗提醒,HarmonyOS鸿蒙语言开发,harmonyos,学习,华为

日期选择弹窗

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



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%')
  }
}

效果图如下:

鸿蒙弹窗提醒,HarmonyOS鸿蒙语言开发,harmonyos,学习,华为

自定义弹窗

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

鸿蒙弹窗提醒,HarmonyOS鸿蒙语言开发,harmonyos,学习,华为
从上面的效果图可以看出,这个选择框是一个多选的列表弹窗,我们可以使用装饰器@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。


export default struct CustomDialogWidget {
   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。

export default struct CustomDialogWidget {
   hobbyBeans: HobbyBean[] = [];
   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方法,用于显示弹窗。


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

参考

关于更多弹窗,您可以参考:

警告弹窗

列表选择弹窗

自定义弹窗

日期滑动选择弹窗

时间滑动选择弹窗

文本滑动选择弹窗文章来源地址https://www.toymoban.com/news/detail-790764.html

到了这里,关于harmonyOS鸿蒙官网教程-添加弹窗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 详细教程 - 进阶版 鸿蒙harmonyOS应用 第十八节——鸿蒙OS应用性能优化指南

    性能优化是提升鸿蒙OS应用质量的重要手段。优化的角度包括加载速度、CPU使用率、内存占用、电量消耗、网络流量等多个方面。 本文将通俗解释性能表现的影响因素,并结合实例提供有效的检测分析方法与优化策略建议,帮助开发者系统地提升应用性能与用户体验。 2.1 加载时

    2024年01月16日
    浏览(55)
  • 详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第三节 (封装TabBar JS版)

    本组件通过HML布局、CSS样式和JS逻辑封装实现一个通用的Tabbar。支持可配置的Tab项和对应页面,可以方便接入到不同页面中,提高开发效率。 HML部分采用Flex布局实现Tabbar的整体结构,包含多个Tab项。 CSS部分定义样式,包括图标大小、文字颜色等样式参数。支持后续扩展。 JS部分提

    2024年02月04日
    浏览(56)
  • 详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第五节 (基于uni-app封装鸿蒙接口请求库)

      随着鸿蒙系统的兴起,越来越多的app会采用鸿蒙开发。而鸿蒙开发必不可少的就是调用各种接口服务。为了简化接口的调用流程,我们通常会做一层封装。今天就来讲解一下,如何用uni-app封装鸿蒙的接口请求库。   首先我们要新建一个鸿蒙项目啦!当然选择第一个空白项

    2024年02月02日
    浏览(63)
  • 博客网站添加复制转载提醒弹窗Html代码

    网站如果是完全禁止右键(复制、另存为等)操作,对用户来说体验感会降低,但是又不希望自己的原创内容直接被copy,今天飞飞和你们分享几行复制转载提醒弹窗Html代码。 效果展示: 复制以下代码,将其放在网站footer.php或者header.php任意底部位置即可。 通过这几行代码,

    2024年02月13日
    浏览(44)
  • 非华为机型如何体验HarmonyOS鸿蒙系统 刷写HarmonyOS鸿蒙GSI系统以及一些初步的bug修复

    最近很多视频网站有非华为机型使用HarmonyOS鸿蒙系统的演示。其实大都是刷了HarmonyOS鸿蒙系统gsi系统。体验还可以。有些刷入后bug较多。那么这些机型是如何刷写gsi?可以参考我以往帖子 安卓玩机搞机-----没有第三方包 刷写第三方各种GSI系统 体验非官方系统_gsi刷机包_安卓机

    2024年02月09日
    浏览(46)
  • Java之父詹姆斯·高斯林 (James Gosling)学鸿蒙(HarmonyOS),HarmonyOS(鸿蒙)——Image组件详述

     本文已收录于专栏 ❤️《鸿蒙开发》❤️ 欢迎各位关注、三连博主的文章及专栏,每周定期更新1-5篇基础文章,共勉! Image是用来显示图片的组件,我们在开发中使用的非常频繁! ​ Image也是组件,它继承自: ohos.agp.components.Component ​ 我们在使用Image组件的时候,只需要

    2024年02月11日
    浏览(47)
  • 初识鸿蒙HarmonyOS系统

    鸿蒙HarmonyOS的诞生背景 鸿蒙HarmonyOS的起源:           鸿蒙HarmonyOS是中华为面对全球科技发展趋势和自身战略需求,在2019年推出的全新一代面向全场景的分布式操作系统。它的诞生旨在应对物联网时代下各种智能设备互联互通的需求,以及构建自主可控的生态系统,特别是

    2024年04月13日
    浏览(43)
  • HarmonyOS-鸿蒙系统概述

    你了解鸿蒙系统吗? 你看好鸿蒙系统吗? 今年秋季即将推出的HarmonyOS Next 星河版热度空前,一起来了解一下吧。本文将从HarmonyOS 的应用场景、发展历程、架构、开发语言、开发工具、生态建设六个角度聊一聊个人的理解。 1、应用场景 鸿蒙,原本意思是中国神话传说的远古

    2024年04月10日
    浏览(46)
  • HarmonyOS鸿蒙操作系统架构

    目录 1. 分布式架构: 2. 统一的开发平台: 3. 多内核共享: 4. 自适应界面: 5. AR、VR、MR支持: 6. 安全和隐私保护: 7. AI集成: 8. 应用生态系统: 9. 开源和开放: 10. 快速部署和更新: 11. 分布式数据管理: 12. 分布式安全体系: 13. 分布式标识和认证: 14. 统一的开发语言和

    2024年02月04日
    浏览(48)
  • 【HarmonyOS】鸿蒙操作系统架构

    其它相关推荐: 软考系统架构之案例篇(架构设计相关概念) 系统架构之微服务架构 系统架构设计之微内核架构 所属专栏:系统架构设计师 HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。 在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力、适

    2024年02月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包