HarmonyOS开发案例:【使用List组件实现设置项】

介绍

在本篇CodeLab中,我们将使用List组件、Toggle组件以及Router接口,实现一个简单的设置页,点击将跳转到对应的详细设置页面。效果图如下:

相关概念

  • [@CustomDialog]:@CustomDialog装饰器用于装饰自定义弹窗。
  • [List]:List是常用的滚动类容器组件之一,它按照水平或者竖直方向线性排列子组件, List的子组件必须是ListItem,它的宽度默认充满List的宽度。
  • [TimePicker]:TimePicker是选择时间的滑动选择器组件,默认以 00:00 至 23:59 的时间区创建滑动选择器。
  • [Toggle]:组件提供勾选框样式、状态按钮样式及开关样式。
  • [Router]:通过不同的url访问不同的页面,包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。

环境搭建

软件要求

  • [DevEco Studio]版本:DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本:API version 9。

硬件要求

  • 开发板类型:[润和RK3568开发板]。
  • OpenHarmony系统:3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:

  1. [获取OpenHarmony系统版本]:标准系统解决方案(二进制)。以3.2 Release版本为例:

  2. 搭建烧录环境。

    1. [完成DevEco Device Tool的安装]
    2. [完成RK3568开发板的烧录]
  3. 搭建开发环境。

    1. 开始前请参考[工具准备],完成DevEco Studio的安装和开发环境配置。
    2. 开发环境配置完成后,请参考[使用工程向导]创建工程(模板选择“Empty Ability”),选择JS或者eTS语言开发。
    3. 工程创建完成后,选择使用[真机进行调测]。
    4. 鸿蒙开发指导文档:gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

代码结构解读

本篇Codelab只对核心代码进行讲解,完整代码可以直接从gitee获取。

├──entry/src/main/ets                        // 代码区
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstant.ets               // 常量集合文件
│  │  └──utils
│  │     ├──BroadCast.ets                    // 事件发布订阅管理器
│  │     └──Log.ets                          // 日志打印
│  ├──entryability
│  │  └──EntryAbility.ts                     // 应用入口,承载应用的生命周期
│  ├──model
│  │  ├──EventSourceManager.ets              // 事件资源管理器
│  │  ├──TaskInfo.ets                        // 任务信息存放
│  │  └──TaskInitList.ets                    // 初始化数据
│  ├──pages
│  │  ├──ListIndexPage.ets                   // 页面入口
│  │  └──TaskEditPage.ets                    // 编辑任务页
│  ├──view
│  │  ├──CustomDialogView.ets                // 自定义弹窗统一入口
│  │  ├──TaskDetail.ets                      // 任务编辑详情组件
│  │  ├──TaskEditListItem.ets                // 任务编辑详情Item组件
│  │  ├──TaskList.ets                        // 任务列表组件
│  │  └──TaskSettingDialog.ets               // 弹窗组件
│  └──viewmodel
│     ├──FrequencySetting.ets                // 频率范围设置
│     └──TaskTargetSetting.ets               // 任务目标设置
└──entry/src/main/resources├──base│  ├──element                             // 字符串以及颜色的资源文件│  ├──media                               // 图片等资源文件│  └──profile                             // 页面配置文件存放位置├──en_US│  └──element│     └──string.json                      // 英文字符存放位置├──rawfile                                // 大体积媒体资源存放位置└──zh_CN└──element└──string.json                     // 中文字符存放位置`HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

搜狗高速浏览器截图20240326151547.png

任务列表页

任务列表页由上部分的标题、返回按钮以及正中间的任务列表组成。

使用Navigation以及List组件构成元素,使用ForEach遍历生成具体列表。这里是Navigation构成页面导航:

// ListIndexPage.ets
Navigation() {Column() {// 页面中间的列表TaskList() }.width(THOUSANDTH_1000).justifyContent(FlexAlign.Center)
}
.size({ width:THOUSANDTH_1000, height:THOUSANDTH_1000 })
.title(ADD_TASK_TITLE)

列表右侧有一个判断是否开启的文字标识,点击某个列表需要跳转到对应的任务编辑页里。具体的列表实现如下:

// TaskList.ets
List({ space:commonConst.LIST_ITEM_SPACE }) {ForEach(this.taskList, (item: TaskListItem) => {ListItem() {Row() {Row() {Image(item?.icon)...Text(item?.taskName)...}.width(commonConst.THOUSANDTH_500)// 状态显示if (item?.isOpen) {Text($r('app.string.already_open'))...}Image($r('app.media.right_grey'))...}...}...// 路由跳转到任务编辑页.onClick(() => {router.pushUrl({url: 'pages/TaskEditPage',params: {params: formatParams(item),}})})...})
}

任务编辑页

任务编辑页由上方的“编辑任务”标题以及返回按钮,主体内容的List配置项和下方的完成按钮组成,实现效果如图:

由于每一个配置项功能不相同,且逻辑复杂,故将其拆分为五个独立的组件。

任务编辑页面,由Navigation和一个自定义组件TaskDetail构成:

// TaskEditPage.ets
Navigation() {Column() {TaskDetail()}.width(THOUSANDTH_1000).height(THOUSANDTH_1000)
}
.size({ width:THOUSANDTH_1000, height:THOUSANDTH_1000 })
.title(EDIT_TASK_TITLE)
.titleMode(NavigationTitleMode.Mini)

自定义组件由List以及其子组件ListItem构成:

// TaskDetail.ets
List({ space:commonConst.LIST_ITEM_SPACE }) {ListItem() {TaskChooseItem()}...ListItem() {TargetSetItem()}...ListItem() {OpenRemindItem()}...ListItem() {RemindTimeItem()}...ListItem() {FrequencyItem()}...
}
.width(commonConst.THOUSANDTH_940)

列表的每一项做了禁用判断,需要任务打开才可以点击编辑:

// TaskDetail.ets
.enabled(this.settingParams?.isOpen)

一些特殊情况的禁用,如每日微笑、每日刷牙的目标设置不可编辑:

// TaskDetail.ets
.enabled(this.settingParams?.isOpen&& (this.settingParams?.taskID !== taskType.smile)&& (this.settingParams?.taskID !== taskType.brushTeeth)
)

提醒时间在开启提醒打开之后才可以编辑:

// TaskDetail.ets
.enabled(this.settingParams?.isOpen && this.settingParams?.isAlarm)

设置完成之后,点击完成按钮,此处为了模拟效果,并不与数据库产生交互,因此直接弹出提示“设置完成!!!”。

// TaskDetail.ets
finishTaskEdit() {prompt.showToast({message: commonConst.SETTING_FINISHED_MESSAGE})
}

任务编辑弹窗

弹窗由封装的自定义组件CustomDialogView注册事件,并在点击对应的编辑项时触发,从而打开弹窗:

CustomDialogView引入实例并注册事件:

// CustomDialogView.ets
targetSettingDialog = new CustomDialogController({builder: TargetSettingDialog(),autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx:ZERO, dy:MINUS_20 }
})
...// 注册事件
this.broadCast.on(BroadCastType.SHOW_FREQUENCY_DIALOG,() => {this.FrequencyDialogController.open();})

点击对应的编辑项触发:

// TaskDetail.ets
.onClick(() => {if (this.broadCast !== undefined) {this.broadCast.emit(BroadCastType.SHOW_TARGET_SETTING_DIALOG);}
})

自定义弹窗的实现:

因为任务目标设置有三种类型:

  • 早睡早起的时间
  • 喝水的量度
  • 吃苹果的个数

如下图所示:

在这里插入图片描述

故根据任务的ID进行区分,将同一弹窗复用:

// TaskSettingDialog.ets
if ([taskType.getup, taskType.sleepEarly].indexOf(this.settingParams?.taskID) > commonConst.HAS_NO_INDEX) {TimePicker({selected:commonConst.DEFAULT_SELECTED_TIME})...
} else {TextPicker({ range:this.settingParams?.taskID === taskType.drinkWater ? this.drinkRange : this.appleRange,value: this.settingParams.targetValue})...
}

弹窗确认的时候将修改好的值赋予该项设置,如不符合规则,将弹出提示:

// TaskSettingDialog.ets
// 校验规则
compareTime(startTime: string, endTime: string) {if (returnTimeStamp(this.currentTime) < returnTimeStamp(startTime) ||returnTimeStamp(this.currentTime) > returnTimeStamp(endTime)) {// 弹出提示prompt.showToast({message:commonConst.CHOOSE_TIME_OUT_RANGE})return false;}return true;
}// 设置修改项
if (this.settingParams?.taskID === taskType.sleepEarly) {if (!this.compareTime(commonConst.SLEEP_EARLY_TIME, commonConst.SLEEP_LATE_TIME)) {return;}this.settingParams.targetValue = this.currentTime;return;
}
this.settingParams.targetValue = this.currentValue;

其余弹窗实现基本类似,这里不再赘述。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 权限与软件包管理器 yum

一. 研究Linux默认权限 目录 &#xff0c;起始权限&#xff1a;777 普通文件&#xff0c;起始权限666 Linux系统中存在权限掩码 使用umask指令也可以改变掩码 如果将掩码改为0000 我们可以看到权限发生改变&#xff08;重新设置掩码&#xff09; 最终权限起始权限 去掉 权限…

通过easyExcel实现表格的导入导出

本篇为&#xff0c;通过easyExcel实现 多种数据类型表格 的导入导出 引入2.2.11版本easyExcel依赖 <font color-“byle”>easyExcel版本不同&#xff0c;converter接口中的方法也不相同&#xff0c;一定要注意版本的使用 <dependency><groupId>com.alibaba&…

[华为OD] 给航天器一侧加装长方形或正方形的太阳能板 100

给航天器一侧加装长方形或正方形的太阳能板&#xff08;图中的红色斜线区域&#xff09;&#xff0c;需要先安装两个支 柱&#xff08;图中的黑色竖条&#xff09;&#xff0c;再在支柱的中间部分固定太阳能板。但航天器不同位置的支柱长度 不同&#xff0c;太阳能板的安装面…

【算法基础实验】图论-构建无向图

构建无向图 前提 JAVA实验环境 理论 无向图的数据结构为邻接表数组&#xff0c;每个数组中保存一个Bag抽象数据类型&#xff08;Bag类型需要专门讲解&#xff09; 实验数据 我们的实验数据是13个节点和13条边组成的无向图&#xff0c;由一个txt文件来保存&#xff0c;本…

python——re库

Python的re库是用于处理正则表达式的标准库&#xff0c;正则表达式是一种强大而灵活的文本处理工具&#xff0c;能够帮助你执行复杂的字符串匹配和替换操作。下面是一些基本的API及其使用场景和示例&#xff1a; 1. re.compile(pattern[, flags]) 功能&#xff1a;编译正则表…

架构师系列- JVM(三)- 类加载

通过字节码&#xff0c;我们了解了class文件的结构 通过运行数据区&#xff0c;我们了解了jvm内部的内存划分及结构 接下来&#xff0c;让我们看看&#xff0c;字节码怎么进入jvm的内存空间&#xff0c;各自进入那个空间&#xff0c;以及怎么跑起来。 4.1 加载 4.1.1 概述 …

【目标检测】YOLOv7 网络结构(与 YOLOv4,YOLOv5 对比)

YOLOv7 和 YOLOv4 Neck 与 Head 结构对比 其实 YOLOv7 的网络结构网上很多文章已经讲得很清除了&#xff0c;网络结构图也有非常多的版本可供选择&#xff0c;因为 YOLOv7 和 YOLOv4 是一个团队的作品&#xff0c;所以在网络结构方面&#xff0c; YOLOv7 和 YOLOv4 有很多相似…

用不了ChatGPT?快试试免费又强大的Anthropic Claude

一、Claude 简介 Anthropic 官方&#xff1a; https://www.anthropic.com/product Claude 是最近新开放的一款 AI 聊天机器人&#xff0c;是世界上最大的语言模型之一&#xff0c;比之前的一些模型如 GPT-3 要强大得多&#xff0c;因此 Claude 被认为是 ChatGPT 最有力的竞争…

每天一个数据分析题(二百八十五)——四分位差

四分位差是一组数据的上四分位数与下四分位数之差&#xff0c;下面选项错误的是 A. 四分位差受极端值的影响 B. 四分位差是一个局部指标&#xff0c;衡量了处于50%数据的离散程度 C. 四分位差越大&#xff0c;说明处于中间50%数据越分散 D. 顺序数据适合用四分位差来度量离…

软件开发职业发展:技能掌握、学习策略与市场适应性

软件开发职业发展&#xff1a;技能掌握、学习策略与市场适应性 首先提出一个问题&#xff1a; 现在学的语言什么的&#xff0c;哪个语言更好&#xff0c;或者是后端更主流什么&#xff1f; 编程语言技能与职业发展的关联性 编程语言的通用性 在大型科技公司&#xff0c;如华…

SpringBoot学习之Kafka发送消费消息入门实例(三十五)

使用Kafka之前需要先启动fKafka,如何下载安装启动kafka请先参考本篇文章的前两篇: 《SpringBoot学习之Kafka下载安装和启动【Windows版本】(三十四)》 《SpringBoot学习之Kafka下载安装和启动【Mac版本】(三十三)》 一、POM依赖 1、加入kafka依赖 2、我的整个POM代码…

算法-差分数组

差分数组&#xff1a;适用于对数字列表中某区间元素频繁加减。 原数组nums,根据nums构造一个差分数组diff,diff[i]就是nums[i] 与nums[i - 1]之差。 python: diff[0] nums[0] for i in range(1, len(nums)): diff[i] nums[i] - nums[i - 1] 如&#xff1a;nums[8, 6, 3,…

物联网的基本功能及五大核心技术——青创智通

工业物联网解决方案-工业IOT-青创智通 物联网基本功能 物联网的最基本功能特征是提供“无处不在的连接和在线服务”&#xff0c;其具备十大基本功能。 &#xff08;1&#xff09;在线监测&#xff1a;这是物联网最基本的功能&#xff0c;物联网业务一般以集中监测为主、控制为…

【深度学习】YOLOv5,烟雾和火焰,目标检测,防火检测,森林火焰检测

文章目录 数据收集和数据标注查看标注好的数据的脚本下载yolov5创建 dataset.yaml训练参数开始训练yolov5n训练训练后的权重下载gradio部署 数据收集和数据标注 搜集数据集2w张。 pip install labelme labelme 然后标注矩形框和类别。 下载数据请看这里&#xff1a; https:…

【Docker】Docker的网络与资源控制

Docker网络实现原理 Docker使用Linux桥接&#xff0c;在宿主机虚拟一个Docker容器网桥(docker0)&#xff0c;Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址&#xff0c;称为Container-IP&#xff0c;同时Docker网桥是每个容器的默认网关。因为在同一宿主机内…

01数学建模 -线性规划

1.1线性规划–介绍 翻译翻译什么叫惊喜 1.2线性规划–原理 拉格朗日乘数法手算 最值化 f ( x , y ) , s . t . g ( x , y ) c , 引入参数 λ &#xff0c;有&#xff1a; F ( x , y , λ ) f ( x , y ) λ ( g ( x , y ) − c ) 再将其分别对 x , y , λ 求导&#xff0c…

Eureka 详解:构建高可用微服务架构

目录 引言 一.Eureka 简介 二.关键概念和组件 1.服务注册 2.服务发现 3.Eureka 服务器 4.服务注册表 5.续约 6.负载均衡 7.故障转移和容错 8.集群和复制 9.服务元数据 三.Eureka 的工作原理 四.Eureka 的优势 五.实例&#xff1a;使用 Eureka 的微服务架构 步骤…

K8s 使用 Ceph RBD 作为后端存储(静态供给、动态供给)

一、K8s 使用 Ceph RBD Ceph RBD&#xff08;Rados Block Device&#xff09;是 Ceph 存储集群中的一个重要组件&#xff0c;它提供了块级别的存储访问。RBD 允许用户创建虚拟块设备&#xff0c;并将其映射到客户端系统中&#xff0c;就像本地磁盘一样使用。 首先所有 k8s 节…

android 获取手机号码

在Android应用中获取用户手机号码是一个敏感操作&#xff0c;通常涉及到用户的隐私和安全问题。因此&#xff0c;从Android 6.0&#xff08;API 级别 23&#xff09;开始&#xff0c;访问电话号码等敏感信息需要用户的明确授权。即使有了授权&#xff0c;直接从设备上获取手机号…

电脑安装双系统

在一台电脑上安装Linux和Windows的双系统可以让你在同一硬件上运行两种操作系统。以下是安装Linux和Windows双系统的一般步骤&#xff1a; 步骤1: 备份数据 在进行任何操作系统安装或重大更改之前&#xff0c;首先备份你的重要数据&#xff0c;以防万一出现问题。 步骤2: 准…