HarmonyOS 鸿蒙Next中求指点：关于ListItem的渲染和生命周期的疑问

HarmonyOS 鸿蒙Next中求指点：关于ListItem的渲染和生命周期的疑问 本人初学鸿蒙，最近写了一个简单页面，有个bug百思不得其解，甚至有时候不能稳定触发，感觉涉及到ListItem的渲染时机，发出来请各位大佬指点。

代码贴在最后

复现步骤：

第一步：手动勾选【敲代码1】【敲代码2】【敲代码3】后，【全选】复选框会自动勾上，到此正常。

第二步：手动取消【敲代码2】【敲代码3】（任意一个或两个），此时 【全选】复选框会取消勾选，到此还正常

第三步（bug）：此时，再勾选【全选】复选框，上面的【敲代码1】【敲代码2】【敲代码3】没有勾上，还保留第二步的状态，这是为什么？

备注：如第一次未触发，可重复操作几次，触发率非常高。

另：ListItem中，我借助onAppear方法，发现bug触发的时候，onAppear方法没有被调用，也就是说ListItem没有重新渲染。技术有限，只能排查到这里，希望给各位大神提供一些灵感。

还有就是：我知道代码还有可优化的地方，复选框也有更好的实现方式，例如checkBoxGroup等，但我想知道的是我这么写的问题在哪？关于代码优化的建议在此就谢绝各位大大啦~~十分感谢

使用工具：DevEco Studio 5.0.5 Release

虚拟机版本：HarmonyOS 5.0.5(17)

bug页面如下：可以看到此时【全选复选框勾上，但上面的框没有勾，正常应该都勾上】

代码：

import { JSON } from '@kit.ArkTS';

interface TaskItem {
  title: string
  selected: boolean
}

@Extend(Checkbox)
function checkBoxStyle(selected: boolean) {
  .width(20)
  .height(20) // 方形的checkBox
  .shape(CheckBoxShape.ROUNDED_SQUARE) // 选中的颜色
  .selectedColor(Color.Orange)
  .select(selected)
}

@Entry
@Component
struct TodoListDemo {
  @State taskText: string = '';
  @State @Watch('taskListChange') taskList: Array<TaskItem> = [
    {
      title: '敲代码1',
      selected: false
    },
    {
      title: '敲代码2',
      selected: false
    },
    {
      title: '敲代码3',
      selected: false
    },
  ];
  @State selectedAll: boolean = false;
  @State completed: number = 0;
  @State unfinished: number = this.taskList.length;

  taskListChange() {
    this.completed = this.taskList.filter(item => item.selected === true).length
    this.unfinished = this.taskList.length - this.completed
    this.selectedAll = this.unfinished === 0
    console.log('selectedAll：' + this.selectedAll)
    console.log('list：' + JSON.stringify(this.taskList))
  }

  build() {
    Column({ space: 10 }) {
      TextInput({ placeholder: '请输入任务后,按回车确定', text: this.taskText })
        .fontColor(Color.Gray)
        .onSubmit((type, event) => {
          this.taskList.push({
            title: event.text,
            selected: false
          })
        })

      List() {
        ForEach(this.taskList, (task: TaskItem, index: number) => {
          ListItem() {
            Row() {
              // Checkbox()
              //   .checkBoxStyle(task.selected)
              //   .onChange(select => {
              //     this.taskList = this.taskList.map((item, _index) => {
              //       _index === index && (item.selected = select)
              //       return item
              //     })
              //   })
              Checkbox()
                .checkBoxStyle(task.selected)
                .onChange(select => {
                  task.selected = select
                  this.taskListChange()
                })

              Text(task.title)
                .fontSize(20)
                .width('100%')
            }
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .alignItems(VerticalAlign.Center)
            .padding(20)
          }
          .onAppear(()=>{
            console.log("onappear");
          })
          .border({
            width: 1
          })
        })
      }

      Row() {
        Row() {
          Checkbox()
            .checkBoxStyle(this.selectedAll)
            .onClick(() => {
              this.selectedAll = !this.selectedAll
              this.taskList = this.taskList.map((task) => {
                task.selected = this.selectedAll
                return task
              })
            })

          Text() {
            Span('全选  已完成' + `${this.completed}`)
            Span('，未完成' + `${this.unfinished}`)
          }
        }

        Button('清除已完成任务')
          .backgroundColor(Color.Red)
          .fontColor(Color.White)

      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')

  }
}