HarmonyOS开发案例:【待办列表】

电子说

1.3w人已加入

描述

介绍

使用ArkTS声明式语法和基础组件,实现简易待办列表。效果为点击某一事项,替换标签图片、虚化文字。效果如图所示:

鸿蒙

相关概念

  • [ArkTS语法]:ArkTS是HarmonyOS的主要应用开发语言。ArkTS基于TypeScript(简称TS)语言扩展而来,是TS的超集。
  • [Text组件]:显示一段文本的组件。
  • [Column组件]:沿垂直方向布局的容器。
  • [Row组件]:沿水平方向布局的容器。

环境搭建

软件要求

  • [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”)。
    3. 工程创建完成后,选择使用[真机进行调测]。
    4. 鸿蒙开发指导文档:[qr23.cn/FBD4cY]

代码结构解读

本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在gitee中提供。

├──entry/src/main/ets                   // ArkTS代码区
│  ├──common
│  │  └──constants
│  │     └──CommonConstants.ets         // 公共常量类
│  ├──entryability
│  │  └──EntryAbility.ts                // 程序入口类
│  ├──pages
│  │  └──ToDoListPage.ets               // 主页面
│  ├──view
│  │  └──ToDoItem.ets                   // 自定义单项待办组件
│  └──viewmodel
│     └──DataModel.ets                  // 列表数据获取文件
└──entry/src/main/resources             // 资源文件目录

`HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789v直接拿`

鸿蒙

构建主界面

本章节将介绍应用主页面的实现,采用Column容器嵌套ForEach完成页面整体布局,页面分为两个部分:

  • 标题区:使用Text组件显示“待办”标题。
  • 数据列表:使用ForEach循环渲染自定义组件ToDoItem。

效果如图所示:

鸿蒙

在工程pages目录中,选中Index.ets,点击鼠标右键 > Refactor > Rename,改名为ToDoListPage.ets。改名后,在工程entryability目录下,把EntryAbility.ts文件中windowStage.loadContent方法的第一个参数修改为pages/ToDoListPage。

// EntryAbility.ts
onWindowStageCreate(windowStage: Window.WindowStage) {
  ...
  windowStage.loadContent('pages/ToDoListPage', (err, data) = > {
    ...
  });
}

选中工程的ets目录,点击鼠标右键 > new > Directory,新建view文件夹。选中新建的view文件夹,点击鼠标右键 > new > ArkTS File,新建ToDoItem.ets文件。后续在此文件中封装自定义组件。在ToDoListPage.ets中导入封装的自定义组件ToDoItem,在aboutToAppear生命周期中初始化待办数据totalTasks,在build方法中编写主页面布局,使用Text文本组件显示标题,使用ForEach循环渲染自定义组件ToDoItem。

// ToDoListPage.ets
import ToDoItem'../view/ToDoItem';
...
@Entry
@Component
struct ToDoListPage {
  private totalTasks: Array< string > = [];

  aboutToAppear() {
    this.totalTasks = DataModel.getData();
  }

  build() {
    Column({ space: CommonConstants.COLUMN_SPACE }) {
      Text($r('app.string.page_title'))
        ...
      ForEach(this.totalTasks, (item: string) = > {
        ToDoItem({ content: item })
      }, (item: string) = > JSON.stringify(item))
    }
    ...
  }
}

自定义子组件

在ToDoItem.ets文件中,显示的文本内容为入参content,使用@State修饰参数isComplete来管理当前事项的完成状态。当点击当前ToDoItem时,触发Row组件的onClick事件,更新isComplete的值,isComplete的改变将会刷新使用该状态变量的UI组件。具体表现为:当前点击的ToDoItem中,labelIcon图片的替换、文本透明度opacity属性的变化、文本装饰线decoration的显隐。

// ToDoItem.ets
...
@Component
export default struct ToDoItem {
  private content: string = '';
  @State isComplete: boolean = false;
  
 @Builder labelIcon(icon: Resource) {
    Image(icon)
      ...
  }

  build() {
    Row() {
      if (this.isComplete) {
        this.labelIcon($r('app.media.ic_ok'));
      } else {
        this.labelIcon($r('app.media.ic_default'));
      }
      Text(this.content)
        ...
        .opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT)
        .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })
    }
    ...
    .onClick(() = > {
      this.isComplete = !this.isComplete;
    })
  }
}

审核编辑 黄宇

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分