HarmonyOS实战开发-目标管理、如何实现一个自定义弹窗。

最新推荐文章于 2024-11-08 16:22:10 发布

码牛程序猿

最新推荐文章于 2024-11-08 16:22:10 发布

阅读量929

点赞数 16

分类专栏： HarmonyOS 鸿蒙工程师鸿蒙文章标签： harmonyos 华为 OpenHarmony 鸿蒙开发鸿蒙鸿蒙应用开发鸿蒙工程师

本文链接：https://blog.csdn.net/2401_82546228/article/details/137150124

版权

介绍

本篇Codelab将介绍如何使用@State、@Prop、@Link、@Watch、@Provide、@Consume管理页面级变量的状态，实现对页面数据的增加、删除、修改。要求完成以下功能：

实现一个自定义弹窗，完成添加子目标的功能。
实现一个可编辑列表，可点击指定行展开调节工作目标进度，可多选、全选删除指定行。

环境搭建

软件要求

DevEco Studio版本：DevEco Studio 3.1 Release。
OpenHarmony SDK版本：API version 9。

硬件要求

开发板类型：润和RK3568开发板。
OpenHarmony系统：3.2 Release。

环境搭建

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

获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2.搭建烧录环境。

完成DevEco Device Tool的安装
完成RK3568开发板的烧录

3.搭建开发环境。

开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──entry/src/main/ets                   // ArkTS代码区
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets         // 公共常量类
│  │  └──utils
│  │     ├──DateUtil.ets                // 获取格式化日期工具
│  │     └──Logger.ets                  // 日志打印工具类
│  ├──entryability
│  │  └──EntryAbility.ts                // 程序入口类
│  ├──pages
│  │  └──MainPage.ets                   // 主页面
│  ├──view
│  │  ├──TargetInformation.ets          // 整体目标详情自定义组件
│  │  ├──AddTargetDialog.ets            // 自定义弹窗
│  │  ├──ProgressEditPanel.ets          // 进展调节自定义组件
│  │  ├──TargetList.ets                 // 工作目标列表
│  │  └──TargetListItem.ets             // 工作目标列表子项
│  └──viewmodel
│     ├──DataModel.ets                  // 工作目标数据操作类
│     └──TaskItemViewModel.ets          // 任务进展实体类
└──entry/src/main/resources             // 资源文件目录

构建主界面

MainPage作为本应用的主界面，从上至下由三个自定义组件组成。

标题titleBar。
目标整体进展详情TargetInformation。
子目标列表TargetList。

MainPage主要维护五个参数：子目标数组targetData、子目标总数totalTasksNumber、已完成子目标数completedTasksNumber、最近更新时间latestUpdateDate、监听数据变化的参数overAllProgressChanged。具体作用有以下三个方面：

子组件TargetInformation接收三个参数totalTasksNumber、completedTasksNumber、latestUpdateDate，渲染整体目标详情。
子组件TargetList接收参数targetData渲染列表。
使用@Watch监听overAllProgressChanged的变化。当overAllProgressChanged改变时，回调onProgressChanged方法，刷新整体进展TargetInformation。

// MainPage.ets
@Entry
@Component
struct MainPage {
  // 子目标数组
  @State targetData: Array<TaskItemViewModel> = DataModel.getData();
  // 子目标总数
  @State totalTasksNumber: number = 0;
  // 已完成子目标数
  @State completedTasksNumber: number = 0;
  // 最近更新时间
  @State latestUpdateDate: string = CommonConstants.DEFAULT_PRO