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

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

//构建界面
@Component
export default struct TaskPage {
  @State totalTask: number = 0
  @State finishTask: number = 0

  build() {
    Column({ space: 20 }) {
      //上半部分任务进度组件
      progressView({ totalTask: this.totalTask, finishTask: this.finishTask })
      //下半部分新增任务+任务列表组件。
      progressList({ totalTask: $totalTask, finishTask: $finishTask })
    }
    .width('100%')
    .height('100%')
    .padding({ top: 20 })
    .backgroundColor('#ffeceaea')
  }
}

定义了一个名为 TaskPage 的结构体（struct）并导出为默认模块。

1. Column 布局容器

   • Column({ space: 20 }) { ... }：定义了一个垂直排列的布局容器，并设置了子组件之间的间距为 20。

2. 上半部分任务进度组件

   • progressView({ totalTask: this.totalTask, finishTask: this.finishTask })：添加了一个任务进度组件，传入了总任务数和已完成任务数作为参数。

3. 下半部分新增任务+任务列表组件

   • progressList({ totalTask: $totalTask, finishTask: $finishTask })：添加了一个包含新增任务和任务列表的组件，传入了总任务数和已完成任务数作为参数。

4. 样式和布局设置

   • .width('100%')：设置整体宽度为100%。
   • .height('100%')：设置整体高度为100%。
   • .padding({ top: 20 })：设置顶部内边距为20。
   • .backgroundColor('#ffeceaea')：设置背景颜色为浅灰色。

//使用了装饰器（Decorator）的组件定义开发
@Component
struct progressView {
  @Prop totalTask: number
  @Prop finishTask: number

  build() {
    Row() {
      Text('任务进度:')
        .fontWeight(FontWeight.Bold)
        .fontSize(30)
      //Stack，实现Text叠在进度条的上方
      Stack() {
        Row() {
          Text(this.finishTask + '')
            .fontSize(30)
            .fontColor('#36D')
          Text(' /' +
          ' ' + this.totalTask)
            .fontSize(30)
        }
      }
    }
    .card()
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

基于框架的前端开发代码

1. Row 布局容器

   • Row() { ... }：定义了一个水平排列的布局容器。

2. 任务进度文本和进度条

   • Text('任务进度:')：添加了一个文本标签，显示“任务进度:”。
     • .fontWeight(FontWeight.Bold)：设置文本粗体显示。
     • .fontSize(30)：设置文本字体大小为30。
   • Stack() { ... }：使用了 Stack 布局容器，用于叠放多个元素。
     • Row() { ... }：在 Stack 中定义了一个水平排列的布局容器。
       • Text(this.finishTask + '')：显示已完成任务数。
         • .fontSize(30)：设置文本字体大小为30。
         • .fontColor('#36D')：设置文本颜色为蓝色。
       • Text(' /' + ' ' + this.totalTask)：显示总任务数。
         • .fontSize(30)：设置文本字体大小为30。

3. 样式和布局设置

   • .card()：应用了卡片样式。
   • .justifyContent(FlexAlign.SpaceEvenly)：设置了内容在主轴上均匀分布的样式。

//任务进度列表组件
@Component
struct progressList {
  @Link totalTask: number
  @Link finishTask: number
  @State task: Task[] = []

  build() {
    Column({ space: 15 }) {
      Button('新增任务')
        .width('50%')
        .onClick(() => {
          this.task.push(new Task()) //id和taskName都是默认值
          this.updateTask()
        })
      //任务列表会超出屏幕，所以用List，可以滑动
      List({ space: 10 }) {
        ForEach(
          this.task,
          (item: Task, index) => {
            ListItem() {
              //提取出任务列表样式，为了实现数组对象可以双向绑定。也就是数组里的对象改变会重新渲染视图
              textElemnet({ item: item, onUpdateTask: this.updateTask.bind(this) }) //bind(this)，则方法内的this就指向当前组件
            }
            .swipeAction({ end: this.deleteButton(index) }) //向右滑动时显示构件，并传index用于删除,这个index是数组的下标
          }
        )
      }
      .alignListItem(ListItemAlign.Center) //左右居中
      .width('100%')
      .layoutWeight(1) //List可以往下拖的关键设置，除了前边别的设置的，剩下的都是List的
    }
  }

  //更新已完成和总的数量
  updateTask() {
    this.totalTask = this.task.length //点击新增，总长度需要随着数组长度改变
    this.finishTask = this.task.filter(item => item.isFinish).length //当前完成的值为总的选中的任务，即所有任务先过滤，item.isFinish是返回为true的数据
  }

  //删除按钮
  @Builder deleteButton(index: number) {
    Button() {
      Image($r('app.media.ic_public_delete_filled'))
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor('#fff50d0d')
    .margin(5)
    .onClick(() => {
      this.task.splice(index, 1)
      this.updateTask()
    })
  }
}

任务进度列表组件的定义

• 新增任务按钮

  • 当点击新增任务按钮时，会向任务列表中添加一个新的默认任务，并调用 updateTask() 方法更新任务数量。

• 任务列表

  • 使用 List 组件来展示任务列表，支持滑动操作。
  • 对于任务列表中的每一项，使用 ListItem 组件进行渲染，同时提供滑动删除按钮的功能。
    • 每个 ListItem 上展示了任务列表样式，并通过双向绑定实现了数组对象的改变时重新渲染视图。

更新任务数量

• updateTask() 方法用于更新已完成和总的任务数量，根据任务列表的状态实时计算出已完成任务数和总任务数。

删除按钮

• @Builder deleteButton(index: number)：定义了一个 deleteButton 构建器，用于创建滑动删除按钮。
  • 点击删除按钮时，会移除对应索引的任务，并调用 updateTask() 方法更新任务数量。