介绍
本篇Codelab将介绍如何使用ArkTS声明式语法和基础组件,实现简易待办列表。效果为点击某一事项,替换标签图片、虚化文字。
相关概念
- ArkTS语法:ArkTS是HarmonyOS的主要应用开发语言。ArkTS基于TypeScript(简称TS)语言扩展而来,是TS的超集。
- Text组件:显示一段文本的组件。
- Column组件:沿垂直方向布局的容器。
- Row组件:沿水平方向布局的容器。
完整示例
源码下载
环境搭建
我们首先需要完成HarmonyOS开发环境搭建,可参照如下步骤进行。
软件要求
- DevEco Studio版本:DevEco Studio 3.1 Release。
- HarmonyOS SDK版本:API version 9。
硬件要求
- 设备类型:华为手机或运行在DevEco Studio上的华为手机设备模拟器。
- HarmonyOS系统:3.1.0 Developer Release。
环境搭建
- 安装DevEco Studio,详情请参考下载和安装软件。
- 设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:
- 如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。
- 如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境。
- 开发者可以参考以下链接,完成设备调试的相关配置:
代码结构解读
本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在源码下载或gitee中提供。
├──entry/src/main/ets // 代码区
│ ├──common
│ │ └──constants
│ │ └──CommonConstants.ets // 公共常量类
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口类
│ ├──pages
│ │ └──ToDoListPage.ets // 主页面
│ ├──view
│ │ └──ToDoItem.ets // 自定义单项待办组件
│ └──viewmodel
│ └──DataModel.ets // 列表数据获取文件
└──entry/src/main/resources // 资源文件目录
构建主界面
本章节将介绍应用主页面的实现,采用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;
})
}
}
总结
您已经完成了本次Codelab的学习,并了解到以下知识点:
- ArkTS声明式语法。
- Image、Text、Column、Row等基础组件的使用。