【Harmony OS 4.0】待办列表案例

在这里插入图片描述
src/main/ets/example1/Models.ets

// 定义class类数据模型
export class TaskDataModel {// private 私有属性，在类对象外不允许随意更改数据，必须本地初始化。private tasks: Array<string> = ['早起晨练', '准备早餐', '阅读名著', '学习ArkTs', '玩游戏放松']getData(): Array<string> {return this.tasks}
}

src/main/ets/example1/ItemComponent.ets

// 子组件
@Component
export default struct ItemComponent {@Prop task_content: string // 从父组件接收待办任务的内容@State isComplete: boolean = false // 定义状态变量isComplete，是否完成该任务的标记@Builder // @Builder 组件内自定义构建函数，按值传递参数CreateIcon(icon: Resource): void { // icon: Resource 表示资源引用类型Column() {Image(icon).width(28).height(28).objectFit(ImageFit.Contain).margin(10)}}build() {Row() {Column() {if (this.isComplete) {this.CreateIcon($r('app.media.ic_ok3'))} else {this.CreateIcon($r('app.media.ic_default'))}}Column() {Text(this.task_content).width('100%').fontSize(20).fontWeight(500).decoration({type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None,color: Color.Black})// 根据任务是否完成确定文本删除线.opacity(this.isComplete ? .6 : 1) // 根据任务是否完成来设置文本透明度}.onClick(() => {this.isComplete = !this.isComplete})}.margin({ bottom: 8, left: 16, right: 16 }).borderRadius(20).padding(10).backgroundColor('#FFFFFF')}
}

src/main/ets/example1/index.ets

// 父组件
import { TaskDataModel } from './Models'
import ItemComponent from "./ItemComponent"@Entry
@Component
struct TaskListIndex {private totalDate: Array<string> = []// 自定义组件生命周期： 组件即将出现时回调该接口，在创建自定义组件新实例后，在执行其build()函数之前执行。aboutToAppear(): void {this.totalDate = new TaskDataModel().getData() // 初始化数据}build() { // 构建入口的UI界面Column({ space: 3 }) {Text('待办').fontSize(30).fontWeight(800).width('90%').height(50).textAlign(TextAlign.Start)List() {ForEach(this.totalDate, (item: string) => {ItemComponent({ task_content: item })})}}.width('100%').height('100%').backgroundColor('#EEEEEE')}
}