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

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 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%')
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 如何实现一个遮罩
495浏览 • 1回复 待解决
如何实现文本展开收起功能
888浏览 • 1回复 待解决
如何开一个半透明的页面?
369浏览 • 1回复 待解决
HarmonyOS WebView实现渲染资料
391浏览 • 1回复 待解决
Scroll中点击一个图片移动到顶端
867浏览 • 1回复 待解决