HarmonyOS 鸿蒙Next中TreeView组件如何设置默认展开所有子节点

【问题背景】

• TreeView树组件无法一次性展开所有子节点

【解决方案】

• 使用 List 组件自定义实现
  • 通过 List 组件构建容器，结合 Button 点击事件与条件判断控制内容显隐，支持添加动画效果，具体逻辑如下：

参考我下面这个例子，我这样子是可以全部默认展开子节点的

@Entry
@Component
struct ListTest {
  private arr: number[] = [0, 1, 2, ..., 14]; // 15个列表项数据
  @State isContentShow: boolean[] = new Array(15).fill(true); // 控制显隐的状态数组:默认全部展开
  context: UIContext = this.getUIContext();

  build() {
    Column() {
      List({ initialIndex: 0 }) {
        ForEach(this.arr, (item: number, index: number) => {
          ListItem() {
            Column({ space: 10 }) {
              // 列表项标题栏（含文本+展开/收起按钮）
              Row() {
                Text(item.toString());
                Button(this.isContentShow[index] ? '收起' : '展开')
                  .onClick(() => {
                    // 点击触发动画与状态切换
                    this.context.animateTo({
                      duration: 300,
                      onFinish: () => console.info('animation end')
                    }, () => {
                      this.isContentShow[index] = !this.isContentShow[index];
                    });
                  });
              }
              .padding({ left: 16, right: 16 })
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween);

              // 折叠/展开的内容区域（条件显隐）
              if (this.isContentShow[index]) {
                Text('这是内容区域')
                  .backgroundColor('#33000000')
                  .textAlign(TextAlign.Center)
                  .width('100%')
                  .height(100);
              }
            }
            .backgroundColor('#FFFFFF')
            .width('100%')
            .padding({ top: 12, bottom: 12 })
            .margin({ top: 10 })
            .borderRadius(10);
          };
        }, (item: string) => item.toString()); // ForEach唯一标识
      }
      .scrollBar(BarState.Off) // 隐藏滚动条
      .height('100%')
      .width('100%');
    }
    .backgroundColor('#F1F3F5')
    .padding(12);
  }
}

代码逻辑

1. 状态管理：用@State isContentShow: boolean[]数组记录每个列表项的展开 / 折叠状态（初始值均为false，即默认折叠）。
2. 交互控制：每个 ListItem 内添加 Button，显示文本根据isContentShow[index]切换（展开时显示 “收起”，折叠时显示 “展开”）。
3. 动画效果：通过context.animateTo设置 300ms 时长动画，优化展开 / 折叠的过渡体验，动画结束后触发console.info日志。
4. 内容显隐：通过if (this.isContentShow[index])条件判断，控制 “内容区域”（示例中为灰色背景文本）的显示 / 隐藏。
5. 布局样式：采用 Column+Row 嵌套布局，设置 padding、margin、borderRadius 等样式，保证列表项美观（白色背景、圆角、上下间距 10px）。