电子说
使用ArkTS声明式语法和基础组件,实现简易待办列表。效果为点击某一事项,替换标签图片、虚化文字。效果如图所示:
完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:
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 // 资源文件目录
`HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿`
本章节将介绍应用主页面的实现,采用Column容器嵌套ForEach完成页面整体布局,页面分为两个部分:
效果如图所示:
在工程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;
})
}
}
审核编辑 黄宇
全部0条评论
快来发表一下你的评论吧 !