任务列表，功能实现新增任务，任务进度，完成的任务数和总任务数，勾选完成任务以及删除任务。

//任务类 
class Task { 
  static id: number = 1 
  //任务名称 
  name: string = "任务" 
  //任务状态：是否完成 
  finished: boolean = false 
} 
 
//统一的卡片格式 
@Styles 
function card() { 
  .width('95%') 
  .padding(20) 
  .backgroundColor(Color.White) 
  .borderRadius(15) 
  .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 }) 
} 
 
@Entry 
@Component 
struct Index { 
  //总任务的数量 
  @State totalTask: number = 0; 
  //已完成的任务数量 
  @State finishTask: number = 0; 
  //任务数组 
  @State tasks: Task[] = [] 
 
  handleTaskChange() { 
    this.totalTask = this.tasks.length 
    this.finishTask = this.tasks.filter(i => i.finished).length 
  } 
 
  build() { 
    Row() { 
      Column({ space: 10 }) { 
        //任务进度卡片 
        Row() { 
 
          Text('任务进度: ') 
            .fontSize(30) 
            .fontWeight(FontWeight.Bold) 
          Stack() { 
            Progress({ 
              value: this.finishTask, 
              total: this.totalTask, 
              type: ProgressType.Ring 
            }).width(100) 
            Row() { 
              Text(this.finishTask.toString()) 
                .fontSize(24) 
                .fontColor('#36D') 
              Text(' / ' + this.totalTask.toString()) 
                .fontSize(24) 
                .fontColor('#36D') 
            } 
          } 
        } 
 
        //新增任务按钮 
        Button('新增任务') 
          .width(200) 
          .onClick(() => { 
            this.tasks.push(new Task()) 
            this.handleTaskChange() 
          }) 
        //任务列表 
 
        List({ space: 10 }) { 
          ForEach( 
            this.tasks, 
            (i: Task, index) => { 
              ListItem() { 
                Row() { 
                  Text(i.name) 
                    .fontSize(20) 
                  Checkbox() 
                    .select(i.finished) 
                    .onChange(val => { 
                      i.finished = val 
                      this.handleTaskChange() 
                    }) 
                }.card() 
                .justifyContent(FlexAlign.SpaceBetween) 
              } 
              .swipeAction({ end: this.deleteButton(index) }) 
            } 
          ) 
        } 
        .width('100%') 
        .layoutWeight(1) 
        .alignListItem(ListItemAlign.Center) 
      } 
      .width('100%') 
      .height('100%') 
      .backgroundColor('#F1F2F3') 
    } 
  } 
 
  @Builder 
  deleteButton(index: number) { 
    Button() { 
      Image($r('app.media.delete')) 
        .fillColor(Color.White) 
        .width(20) 
    } 
    .width(40) 
    .height(40) 
    .type(ButtonType.Circle) 
 
    .margin(15) 
    .onClick(() => { 
      this.tasks.splice(index, 1) 
      this.handleTaskChange() 
    }) 
  } 
}