鸿蒙任务列表与秒表集合软件开发（五）

任务列表部分功能实现解析

//要使数组中的对象成为双向绑定数据，要提取出数据
@Component
struct textElemnet {
  @ObjectLink item: Task
  onUpdateTask: () => void //变量，类型是函数

  build() {
    Row() {
      if (this.item.isFinish) {
        Text(this.item.taskName)
          .finishTask()
      } else {
        Text(this.item.taskName)
      }
      Checkbox()
        .select(this.item.isFinish) //复选款选不选中，取决于isFinish
        .onChange((val) => { //val是是否选中的值
          this.item.isFinish = val
          this.onUpdateTask()
        })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .card()
  }
}

实现数组中对象的双向绑定数据。它展示了任务名称，并允许用户通过复选框来标记任务是否完成。
 

组件结构

• 行布局 (Row)

  • 包含任务名称和复选框。

  • 任务名称

    • 使用 Text 组件显示任务名称 this.item.taskName。
    • 如果任务已经完成 (this.item.isFinish 为 true)，使用 .finishTask() 方法来改变文本样式（假设 .finishTask() 是一个自定义样式方法，用于表示任务已完成）。

  • 复选框 (Checkbox)

    • select(this.item.isFinish)：根据 this.item.isFinish 的值决定复选框是否选中。
    • onChange((val) => {...})：当复选框状态改变时，触发事件处理器：
      • 更新任务对象的 isFinish 属性为新的值 val。
      • 调用 this.onUpdateTask() 通知外部组件任务状态发生了变化。

• 布局和样式

  • .justifyContent(FlexAlign.SpaceBetween)：设置行内元素的对齐方式，使其在水平方向上两端对齐。
  • .card()：假设这是一个自定义方法，用于给行添加卡片样式或背景。

功能描述

这个组件的主要功能是：

• 展示单个任务的名称。
• 通过复选框允许用户标记任务是否完成，并将这一变化反馈给父组件。
• 保证任务对象的数据与界面的双向绑定，当任务状态改变时，界面会自动更新，同时通知父组件进行相应的全局状态更新。

//卡片样式
@Styles function card() {
  .width('95%')
  .backgroundColor('#fff')
  .borderRadius(15)
  .padding({ top: 20, bottom: 20, left: 20, right: 20 })
}

//任务完成的样式
@Extend(Text) function finishTask() {
  .decoration({ type: TextDecorationType.LineThrough })
  .fontColor('#B1B2B1')
}

用于给容器组件添加卡片效果，使其看起来像一个独立的卡片区域，增加界面的美观性和层次感。

//任务的类
@Observed
class Task {
  static id: number = 0; //公共的，所有此类对象共享
  taskName: string = `任务${++Task.id}` //直接初始化,Task调用
  isFinish: boolean = false
}

功能

1. 自动生成任务ID:

   • static id: number = 0; 定义了一个静态变量 id，它在所有 Task 类的实例之间共享。
   • 每创建一个新的 Task 实例时，这个 id 会自增，从而给每个任务分配一个唯一的任务名称。

2. 任务名称 (taskName):

   • taskName: string = 任务${++Task.id}`` 使用模板字符串来初始化任务名称。
   • 当一个新的 Task 实例被创建时，Task.id 会先自增，然后将其值附加到字符串 任务 后面，形成类似 任务1、任务2 等等的任务名称。

3. 任务完成状态 (isFinish):

   • isFinish: boolean = false 初始化为 false，表示任务默认是未完成状态。
   • 可以通过其他方法或事件来更新这个状态，例如用户点击一个复选框来完成任务。

4. 观察者模式 (@Observed):

   • @Observed 是一个装饰器（假设它是一个可用的装饰器），它可能用于将这个类注册为可被观察的对象，允许外部组件或函数监听 Task 实例的变化。当 Task 实例的属性发生变化时，可以触发相应的更新机制，比如界面重新渲染等。