如何实现一个折叠组件

使用该页面可以创建一系列由面板组成的组件，并在页面上垂直排列，类似于选项卡，可以操作面板的折叠和展开。在日常生活应用中较常见。

HarmonyOS

噜啦噜啦嘞噜啦嘞

2024-05-26 17:23:13

浏览

回答 1

待解决

回答 1

按赞同

按时间

克里斯蒂东

使用的核心API

Scroll

ForEach

核心代码

@Entry 
@Component 
struct CollapseTest { 
  
  scroller: Scroller = new Scroller() 
  
  build() { 
    Scroll(this.scroller) { 
      Column() { 
        Text('目录列表') 
          .fontSize(30) 
          .fontWeight(FontWeight.Bold) 
          .backgroundColor(Color.Green) 
          .textAlign(TextAlign.Center) 
          .width('100%') 
          .height(70) 
  
        Collapse(); 
      } 
    } 
    .scrollable(ScrollDirection.Vertical) //设置滚动方向: 仅支持竖直方向滚动 
    .edgeEffect(EdgeEffect.Spring) //设置边缘滑动效果 
  } 
} 
  
@Component 
struct Collapse { 
  @State list: String[] = ['目录一', '目录二', '目录三', '目录四', '目录五', '目录六', '目录七', '目录八', '目录九', '目录十', '目录十一']; 
  @State isShow: boolean = true; 
  
  build() { 
    Column() { 
      Column() { 
        ForEach(this.list.slice(0, this.isShow ? 100 : 3), (item: String) => { 
          MList(item) 
        }) 
      } 
      .width('100%') 
  
      Button(this.isShow ? '折叠' : '展开') 
        .width(100) 
        .onClick(() => { 
          this.isShow = !this.isShow; 
        }) 
    } 
  } 
} 
  
@Builder 
function MList(text: String) { 
  Row() { 
    Image($r('app.media.icon')) 
      .size({ 
        width: '40vp', 
        height: '40vp' 
      }) 
  
    Text(String(text)) 
      .width('70%') 
      .fontSize(20) 
      .fontWeight(FontWeight.Bold) 
      .margin({ 
        left: '25vp' 
      }) 
      // .textAlign(TextAlign.Center) 
  }.height(120) 
}

适配版本信息

IDE：DevEco Studio 4.1.1.300

SDK：HarmoneyOS 4.1.2.1