HarmonyOS6 - 鸿蒙ArkTS待办清单实战案例

小学生波波2026-01-14 10:45

HarmonyOS6 - 鸿蒙ArkTS待办清单实战案例

1. 效果图

列出待办事项，前面有一个是否完成的图标标识当前事项是否已完成，如果已完成则为勾选状态切文字灰色展示带有删除线，如果为未完成状态，则为未勾选状态，文字是黑色显示无删除线

2. 代码

js 复制代码

class ToDoModel {
  index: number;
  content: string;

  constructor(index: number, content: string) {
    this.index = index;
    this.content = content;
  }
}

/**
 * Author: 波波老师(vx:javabobo0513)
 * Desc: 待办列表
 */
@Entry
@Component
struct ToDoListPage {
  @State message: string = '待办列表';
  //待办事项数据集合
  @State dataList: Array<ToDoModel> = [
    new ToDoModel(1, '取快递'),
    new ToDoModel(2, '健身'),
    new ToDoModel(3, '图书馆还书'),
    new ToDoModel(4, '小米4S店提车'),
    new ToDoModel(5, '办理交房手续'),
  ]

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      ForEach(this.dataList, (item: ToDoModel) => {
        ToDoItem({ content: item.content })
      }, (item: ToDoModel) => JSON.stringify(item))
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffffff') // 页面背景颜色
  }
}


@Component
struct ToDoItem {
  private content?: string; //具体的待办项的内容
  @State isComplete: boolean = false; //是否完成

  build() {
    Row() {
      //if条件渲染，替换图标效果
      if (this.isComplete) {
        this.labelIcon($r('app.media.ic_ok'));
      } else {
        this.labelIcon($r('app.media.ic_default'));
      }
      //每一条待办事项，通过opacity属性设置虚化效果，decoration属性设置删除线效果
      Text(this.content)
        .fontSize('20fp')
        .fontWeight(500)
        .opacity(this.isComplete ? 0.4 : 1)
        .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })
    }
    .borderRadius(24)
    .backgroundColor('#ffffff')
    .width('95%')
    .height('64vp')
    .onClick(() => {
      this.isComplete = !this.isComplete;
    })
  }

  //抽离"是否完成按钮"的子组件，方便复用
  @Builder
  labelIcon(icon: Resource) {
    Image(icon)
      .width('28vp')
      .height('28vp')
      .margin('20vp')
  }
}