ArkTS待办列表清单【代码可执行】

共分为三个代码文件：

/*
定义APP中需要用到的模型 Models.ets
 */

export class TaskDataModel {
  private tasks: Array<string> = [
    "早起早读",
    "准备早餐",
    "阅读周易",
    "学习实践ArkTS",
    "玩游戏放松一下",
    "准备午饭",
    "午休",
    "刷剧一下午"
  ]

  getData():Array<string> {
    return this.tasks
  }
}

// new TaskDataModel()

/**
 * 每一项的一个组件  ItemComponent.ets
 */
import media from '@ohos.multimedia.media'

@Component
export default struct ItemComponent {

  private task_content:string // 代办任务的内容
  @State isComplete:boolean = false // 是否完成该任务的标记
  @Builder  // 构建函数
  createIcon(icon:Resource) {
    Image(icon)
      .width(28)
      .height(28)
      .objectFit(ImageFit.Contain)
      .margin(20)
  }

  build() { // 构建一个任务的UI界面
    Row() {
      // 第一个是图标
      if (this.isComplete) {
        this.createIcon($r('app.media.ic_ok'))
      }
      else {
        this.createIcon($r('app.media.ic_default'))
      }

      // 第二个是文本
      Text(this.task_content)
        .fontSize(20)
        .fontWeight(500)
        .decoration({type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None}) // 根据任务是否完成决定是否有删除线
        .opacity(this.isComplete ? 0.5 : 1) // 根据任务是否完成来设置透明度
    }
    .borderRadius(24)
    .backgroundColor(Color.White)
    .width('93%')
    .height(65)
    .onClick(() => {
      this.isComplete = !this.isComplete
    })
    
  }
}

/**
 * 构建入口的UI界面   Index.ets
 */

import {TaskDataModel} from './Models'
import ItemComponent from './ItemComponent'

@Entry
@Component
struct TaskListIndex {

  private totalData: Array<string> = [] // 待办列表中所有的数据

  aboutToAppear() { // 初始化数据
    this.totalData = new TaskDataModel().getData()
  }

  build() {
    Column({space: 6}) {
      Text('待办')
        .fontSize(28)
        .lineHeight(33)
        .fontWeight(FontWeight.Bold)
        .width('80%')
        .margin({
          top: 24,
          bottom: 12
        })
        .textAlign(TextAlign.Start)

      // 循环渲染
      ForEach(this.totalData, (item:string) => {
        ItemComponent({task_content: item})
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F3F5')
  }
}

效果图如下：