HarmonyOS 树形结构不定层级如何实现只展开一个，点击同层其他收起

HarmonyOS
zxjiu
2024-12-25 12:57:21
602浏览
回答 1
按赞同
按时间
superinsect
树形结构组件文档上说不支持通用事件，可以考虑用list去做，给这些item绑定点击事件即可，示例参考如下：
declare interface cityData {
  id: string
  parentId: string
  text: string
  children?: cityData[] | undefined
}

const originData: cityData[] =
  [
    {
      id: "110000",
      parentId: "0",
      text: "北京市",
      children: [
        { id: "110101", parentId: "110000", text: "东城区" },
        { id: "110102", parentId: "110000", text: "西城区" },
        { id: "110105", parentId: "110000", text: "朝阳区" },
        { id: "110106", parentId: "110000", text: "丰台区" },
        { id: "110107", parentId: "110000", text: "石景山区" },
        { id: "110108", parentId: "110000", text: "海淀区" },
        { id: "110109", parentId: "110000", text: "门头沟区" },
        { id: "110111", parentId: "110000", text: "房山区" },
        { id: "110112", parentId: "110000", text: "通州区" },
        { id: "110113", parentId: "110000", text: "顺义区" },
        { id: "110114", parentId: "110000", text: "昌平区" },
        { id: "110115", parentId: "110000", text: "大兴区" },
        { id: "110116", parentId: "110000", text: "怀柔区" },
        { id: "110117", parentId: "110000", text: "平谷区" },
      ]
    },
    {
      id: "120000",
      parentId: "0",
      text: "天津市",
      children: [
        { id: "120100", parentId: "120000", text: "天津城区" },
        { id: "120101", parentId: "120000", text: "和平区" }
      ]
    },

    {
      id: "130000",
      parentId: "0",
      text: "河北省",
      children: [
        {
          id: "130100",
          parentId: "130000",
          text: "石家庄市",
          children: [
            { id: "130102", parentId: "130100", text: "长安区" },
            { id: "130104", parentId: "130100", text: "桥西区" },
            { id: "130105", parentId: "130100", text: "新华区" },
            { id: "130105", parentId: "130100", text: "井陉矿区" },
            { id: "130108", parentId: "130100", text: "裕华区" },
            { id: "130109", parentId: "130100", text: "藁城区" },
            { id: "130110", parentId: "130100", text: "鹿泉区" },
            { id: "130111", parentId: "130100", text: "栾城区" }
          ]
        },
        {
          id: "130200",
          parentId: "130000",
          text: "唐山市",
          children: [
            { id: "130202", parentId: "130200", text: "路南区", },
            { id: "130203", parentId: "130200", text: "路北区" },
            { id: "130204", parentId: "130200", text: "古冶区" },
            { id: "130205", parentId: "130200", text: "开平区" },
            { id: "130207", parentId: "130200", text: "丰南区" }
          ]
        }
      ]
    }
  ]


@Entry
@Component
struct PageOne {
  @State isShow: boolean = false
  @State sheetHeight: number = 400;
  @State province: string = ''
  @State city: string = ''
  @State subDivide: string = ''
  @State addressMessage: string = '请输入地址'
  private scrollerForList: Scroller = new Scroller()

  @Builder
  childBuilder() {

  }

  @Builder
  myBuilder() {
    Column() {
      Row() {
        Button('取消')
        Button('确认')
          .onClick(() => {
            this.isShow = false;
          })
          .margin({ left: 180 })
      }
      .margin({ top: 20 })

      Column() {
        List({ space: 1, initialIndex: 0 }) {
          ForEach(originData, (item: cityData, index: number) => {
            if (originData[index].parentId === '0') {
              ListItem() {
                Column() {
                  Row() {
                    Text(item.text)
                      .width('100%')
                      .height(50)
                      .fontSize(16)
                      .textAlign(TextAlign.Center)
                      .borderRadius(10)
                      .backgroundColor(0xFFFFFF)
                      .textAlign(TextAlign.Start)
                      .onClick(() => {
                        this.city = ''
                        this.subDivide = ''
                        if (this.province === item.text) {
                          this.province = ''
                        } else {
                          this.province = item.text
                          this.addressMessage = this.province
                        }
                      })
                  }

                  if (this.province === item.text && item.children) {
                    List({ space: 1, initialIndex: 0, scroller: this.scrollerForList }) {
                      ForEach(item.children, (subItem: cityData, subIndex: number) => {
                        ListItem() {
                          Column() {
                            Text(subItem.text)
                              .width('100%')
                              .height(30)
                              .fontSize(16)
                              .margin({ left: 20 })
                              .textAlign(TextAlign.Center)
                              .borderRadius(10)
                              .backgroundColor(0xFFFFFF)
                              .textAlign(TextAlign.Start)
                              .onClick(() => {
                                this.subDivide = ''
                                if (this.city === subItem.text) {
                                  this.city = ''
                                } else {
                                  this.city = subItem.text
                                  this.addressMessage = this.province + ' ' + this.city
                                }
                              })
                            if (this.city === subItem.text) {
                              List({ space: 1, initialIndex: 0 }) {
                                ForEach(subItem.children, (grandsonItem: cityData, grandsonIndex: number) => {
                                  ListItem() {
                                    Column() {
                                      Text(grandsonItem.text)
                                        .width('100%')
                                        .height(30)
                                        .fontSize(16)
                                        .margin({ left: 50 })
                                        .textAlign(TextAlign.Center)
                                        .borderRadius(10)
                                        .backgroundColor(0xFFFFFF)
                                        .textAlign(TextAlign.Start)
                                        .onClick(() => {
                                          this.subDivide = grandsonItem.text
                                          this.addressMessage = (this.province + ' ' + this.city + ' ' + this.subDivide)
                                        })
                                    }
                                  }
                                })
                              }
                            }
                          }
                        }
                      })
                    }.nestedScroll({
                      scrollForward: NestedScrollMode.SELF_FIRST,
                      scrollBackward: NestedScrollMode.PARENT_FIRST
                    })
                  }
                }
              }

            }
          }, (item: string) => item)
        }
        .width('100%')
        .height('100%')
        .listDirection(Axis.Vertical) // 排列方向
        .scrollBar(BarState.Off)
        .friction(0.6)
        .divider({
          strokeWidth: 2,
          color: 0xFFFFFF,
          startMargin: 20,
          endMargin: 20
        }) // 每行之间的分界线
        .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
      }
    }
    .width('100%')
    .height('80%')
  }

  build() {
    Column() {
      Text(this.addressMessage)
        .width('90%')
        .height(50)
        .borderStyle(BorderStyle.Dashed)
        .borderWidth(5)
        .borderColor(0xAFEEEE)
        .borderRadius(10)
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .bindSheet($$this.isShow, this.myBuilder(), {
          height: this.sheetHeight,
          backgroundColor: Color.White,
          showClose: false,
          dragBar: false,
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}
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.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
2024-12-25 16:13:42
如何写精华回答，获更多曝光？
发布
51CTO

51CTO博客

51CTO学堂

HarmonyOS 树形结构不定层级如何实现只展开一个，点击同层其他收起

订阅鸿蒙技术特刊，精选内容抢先看
