HarmonyOS 实现类似ExpandList，可折叠打开的list组件

参考代码：

interface IRowItem {
  id?: number;
  title?: string;
  name1?: string;
  name2?: string;
  name3?: string;
  flag?: boolean;
  type?: string;
  onFlagChange?: () => void;
}

@Entry
@Component
struct CollapseAndExpandDemo {
  @Provide("flag") flag: boolean = false
  private onFlagChange = () => {
    animateTo({
      duration: 650,
      curve: Curve.Smooth
    }, () => {
      this.flag = !this.flag;
    })
  }

  build() {
    Column() {
      Row() {
        Image($r("app.media.ic_public_back")).width(20).height(20)
        Text('标题').fontSize(18).fontWeight(FontWeight.Bold).margin({ left: 10 })
      }.width('100%').margin({ bottom: 30 })

      Column() {
        RowItem({ props: { title: '全部类型', name1: '言情小说', name2: '推理悬疑', name3: '情感家庭' } })
        RowItem({
          props: { name1: '幻想小说', name2: '惊悚/恐怖', name3: '武侠小说', type: 'DOWN', onFlagChange: this.onFlagChange
          }
        })
        // 直接调用折叠展开组件
        CollapseAndExpand({
          items: [
            { id: 0, name1: '科幻小说', name2: '官场', name3: '历史/架空' },
            { id: 1, name1: '职场商战', name2: '军事谍战', name3: '世界名著' },
            { id: 2, name1: '社会小说', name2: '乡土小说', name3: '中国近当代' },
            { id: 3, name1: '中国古典', name2: '外国小说', name3: '小说作品集', type: 'UP', onFlagChange: this.onFlagChange }
          ],
        })

        RowItem({ props: { title: '全部价格', name1: '免费', name2: '特价', name3: 'VIP' } })
        RowItem({ props: { title: '按人气', name1: '按最新', name2: '按收藏', name3: '按字数' } })
      }.width('100%')

    }
    .height('100%')
    .padding({ top: 30, right: 30, left: 30 })
  }
}

@Component
struct RowItem {
  private props: IRowItem;
  @Consume("flag") flag: boolean
  build() {
    Flex() {
      Text(this.props.title)
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
        .layoutWeight(1)
        .fontColor(Color.Red)
        .margin({ right: 10 })
      Flex({ alignItems: ItemAlign.Center }) {
        Text(this.props.name1).fontSize(14).margin({ right: 10 })
        Text(this.props.name2).fontSize(14).margin({ right: 10 })
        Text(this.props.name3).fontSize(14).margin({ right: 10 })

        if (!this.flag && this.props.type === 'DOWN' || this.flag && this.props.type === 'UP') {
          Image($r("app.media.ic_public_arrow_down_0"))
            .width(16)
            .height(16)
            .objectFit(ImageFit.Contain)
            .rotate({ angle: !this.flag && this.props.type === 'DOWN' ? 0 : 180 }) // 点击展开按钮后旋转180°，展示折叠按钮
            .onClick(() => this.props.onFlagChange())
            .transition({ type: TransitionType.All, opacity: 0 })
        }
      }
      .layoutWeight(3)
    }.width('100%').height(16).margin({ top: 15 })
  }
}

@Component
struct CollapseAndExpand {
  private items: IRowItem[] = [];
  @Consume("flag") flag: boolean;

  build() {
    Column() {
      ForEach(this.items, (item: IRowItem) => {
        RowItem({ props: item })
      }, (item: IRowItem) => item.id.toString())
    }
    .width('100%')
    .clip(true)
    .height(this.flag ? 130 : 0)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.