代码展示：

// 数据模型类，用于表示具有特定结构的对象
class DataModel {
  id: number //用于定义对象的唯一性
  name: string //列表单个对象的名称
  isOk: boolean //用于确定列表是否完成

  /**
   * 构造函数
   * @param id - 必须传入的数字类型ID
   * @param name - 必须传入的字符串类型名称
   * @param isOk - 可选布尔值，默认false（未完成状态）
   */
  constructor(id: number, name: string, isOk: boolean= false) {
    this.id = id;
    this.name = name;
    this.isOk = isOk;
  }
}

//构建一个操作类
class EditData {
  private lists: Array<DataModel> = [] //初始化数据

  //获取任意操作后的最新数据
  getNewData() {
    return this.lists
  }
}

@Entry
@Component
struct CS1 {
  @State lists: Array<DataModel> = new EditData().getNewData() // 初始化数据
  @State len: number = 0 //数据长度
  @State computedNum: number = 0 // 完成总数

  @State addName: string = '' //任务名称

  //创建一个名称叫 onComputedData 的方法
  onComputedData() {
    this.len = this.lists.length // 数据长度=初始化数据的长度

    //通过过滤数组，统计满足条件（isOk === true）的条目数（比如已完成的待办事项数量）
    this.computedNum = this.lists.filter((list: DataModel) => {
      return list.isOk === true
    }).length //完成的总数
  }

  //组件生命周期   aboutToAppear组件即将出现时回调该接口
  aboutToAppear() {
    this.onComputedData() // 调用上面的 onComputedData方法
  }

  build() {
    Column({space:20}) {
      //数据显示组件
      DataShow({count:this.len,countComputed:this.computedNum})

      //搜索栏
      Row({space:10}){
        TextInput({placeholder:'请输入任务...',text:this.addName})
          .layoutWeight(1)

          //onChange事件用于监听输入框内容的变化

          .onChange((value:string)=>{
            this.addName=value;  //进行赋值操作
          })

        //按钮
        Button('添加任务')
          .width(80)
          .onClick(()=>{

            //new DataModel  构造函数，生成新数据对象  数组长度加1   来着搜索框输入的任务名称
            this.lists.push(new DataModel(this.lists.length+1,this.addName))
            this.onComputedData(); //调用刷新的方法
            this.addName=''; //清空任务名称
          })
      }
      if (this.len<=0){
        Text('暂无任务，请添加任务。')
      }else {
        //创建一个列表
        List({space:15}) {
          //列表内容
          // ForEach(需要循环遍历的数组, (循环遍历的成员: 成员类型) => {函数体})
          ForEach(this.lists,(item:DataModel)=>{
            ListItem(){
              Row(){
                Text(item.name) //添加的任务名称
                Checkbox() //新建一个勾选按钮
                  .width(22)
                  .height(22)
                  .select(item.isOk) //勾上或者没勾上
                  .onChange((value)=>{
                    item.isOk=value; //当用户进行操作时候进行赋值
                    this.onComputedData(); //操作完成时候刷新页面内容
                  })
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)//两端对齐
              .backgroundColor(Color.White)
              .borderRadius(10)
              .padding(10)
            }
          })
        }
      }

    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#f3f3f3')
    .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])//沉浸式开发
  }
}




//数据条显示组件

@Component
struct  DataShow{
  @Prop count :number
  @Prop countComputed:number //完成进度
  build() {
    //Stack():层叠组件
    Stack(){
      //使用进度条组件
      Progress({
        value:this.countComputed, //完成进度
        total:this.count,//数据的总数
        type:ProgressType.Ring  //圆环型数据显示
      })
        .style({strokeWidth:10}) //圆环的粗细
        .width(100)
        .height(100)

      //圆环中间文字
      Row(){
        Text(`${this.countComputed}`) //完成总数
        Text(`/${this.count}`)   //总数
      }
    }
  }
}

效果展示：