ArkTS+UI写的任务列表

只有增删的功能，查询功能不全

把所有的view和model都写在了一个ets文件中，涉及到了父子组件数据双向传递@prop，将父组件的方法传递给子组件的方法并使用.bind(this)将当前this传递给子组件的方法，以及自定义弹窗组件@ComtumeDialog和它的CustomDialogController类，以及Progress组件（任务进度组件）
此外，数据并没有持久化，所以刷新之后，数据变回默认状态
效果

代码

class Task{
  name:string
  id:number
  finished:boolean

  constructor(id:number,name:string,finished:boolean) {
    this.id = id
    this.name = name
    this.finished = finished
  }
}

@Entry
@Component
struct TaskListPage {
  title:string= '海草TASK'
  brandName:string = '@海草笔记'
  @State tasks:Array<Task> = [new Task(1,'name',false),new Task(1,'name',false)]
  // 总任务数量
  @State totalTask: number = this.tasks.length
  @State finishTask: number = this.tasks.filter(item=>item.finished).length


  dialogController: CustomDialogController = new CustomDialogController({
    builder: TaskInfoDialog({onTaskConfirm:this.handleAddTask.bind(this),handleTaskChange:this.handleTaskChange.bind(this)}),
  })
  //删除按钮和删除功能
  @Builder deleteButton(index:number){
    Button(){
      Image($r('app.media.icon'))
        .width(20)

    }
    .width(40)
    .height(60)
    .onClick(()=>{
      this.tasks = this.tasks.slice(0, index).concat(this.tasks.slice(index + 1));

    })
  }
  @Builder addButton(){
  Button('新增')
    .onClick(()=>{
      // 打开新增表单对话框
      this.dialogController.open()

    })
  }
  handleAddTask(name: string) {
  let task = new Task(1,name,false)
    console.log(`${task.name}`)
    // console.log(`${this.tasks}`)
  this.tasks.push(task)
    this.dialogController.close()
  }
  handleTaskChange(){
    // 1.更新任务总数量
    this.totalTask = this.tasks.length
    // 2.更新已完成任务数量
    this.finishTask = this.tasks.filter(item => item.finished).length
    console.log(`total:${this.totalTask},finished:${this.finishTask}`)
  }

  build() {
    Column(){
      //头部
      HeaderCom({title:this.title})
      TaskStatics({totalTask:this.totalTask,finishTask:this.finishTask})
      //任务列表
      List({space:6}){
        ForEach(this.tasks,(item:Task,index)=>{
          ListItem(){
            MiddleItemCom({task:item,handleTaskChange:this.handleTaskChange.bind(this)})
            // MiddleItemCom()
          }
          .swipeAction({end:this.deleteButton(index)})
        })
      }
      .alignListItem(ListItemAlign.Center)
      .width('100%')
      .height('60%')
      .backgroundColor(Color.Green)
      //新增按钮
      this.addButton()
      //品牌
      BottomCom({brandName:this.brandName})

    }
    .height('100%')
    .width('100%')

  }
}

//头部自定义组件
@Component
struct HeaderCom{
  title:string = ''

  build() {
    Row(){
      Text(this.title)
        .fontSize('30')
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(50)
    .backgroundColor('#ffa75809')
  }
}
//中间任务列表组件
@Component
struct MiddleItemCom{
  @State task:Task = new Task(1,'name',true)
  fontSize:number = 20
  myBorderRadius:number = 5
  handleTaskChange:()=>void = ()=>{}
  build() {
    Row(){

      //用CheckBox来展示是否已经完成
      if(this.task.finished){
        //序号+任务名
        Text(this.task.name)
          .fontSize(this.fontSize)
          .finishedStyle()
      }else {
        Text(this.task.name)
          .fontSize(this.fontSize)
      }
      Blank()
      Checkbox()
        .select(this.task.finished)
        .width(20)
        .height(20)
        .onChange((value)=>{
          this.task.finished = value
          this.handleTaskChange()
        })
    }

    .backgroundColor(Color.White)
    .height(30)
    .width('95%')
    .borderRadius(this.myBorderRadius)
    .margin(5)

  }
}
//底部组件
@Component
struct BottomCom{
  brandName:string = ''
  build() {
    Row(){
      Text(this.brandName)
        .fontSize('10')
    }
    .width('100%')
    .height(20)
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct Com{
  build(){

  }
}

@CustomDialog
struct TaskInfoDialog{
  @Builder con(){}
  name:string = ''
  onTaskConfirm : (name: string) => void  = (name:string)=> {};
  handleTaskChange:()=>void = ()=>{}
  dialogController: CustomDialogController = new CustomDialogController({builder:Com})
  build() {
    Column({space:20}){
      TextInput({placeholder: '输入任务名'})
        .onChange(val => this.name = val)
      Row(){
        Button('确定')
          .onClick(() => {
            if (this.onTaskConfirm) {
              // console.log(`${this.name}`)
              this.onTaskConfirm(this.name)
              //更新任务进度
              this.handleTaskChange()
            }else {
              console.log('testTag','160line error')
            }

          })
        Button('取消')
          .backgroundColor(Color.Grey)
          .onClick(() => {
            this.dialogController.close()
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .width('100%')
    .padding(20)
    }

}

@Component
struct TaskStatics{
  @Prop totalTask: number
  @Prop finishTask: number
  build() {
    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)
        }
      }
    }
    .card()
    .margin({top: 5, bottom: 10})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

@Extend(Text)
function finishedStyle(){
  .fontColor('#ccc')
  .decoration({
    type:TextDecorationType.LineThrough
  })
}

// 统一的卡片样式
@Styles function card(){
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4})
}