如何实现一个折叠组件

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

HarmonyOS
2024-05-26 17:23:13
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Dinkar

使用的核心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

分享
微博
QQ
微信
回复
2024-05-27 22:02:32
相关问题
如何实现一个组件不停地旋转
903浏览 • 1回复 待解决
ArkTS如何实现一个底部弹窗?
79浏览 • 1回复 待解决
如何实现一个GIF图显示指定次数
812浏览 • 1回复 待解决
有谁知道如何实现一个表格
644浏览 • 1回复 待解决
鸿蒙 如何实现一个渐变的圆形图片;
11073浏览 • 2回复 已解决
如何判断一个对象实现了某个接口
611浏览 • 1回复 待解决
如何实现一个自定义样式的toast提示
701浏览 • 1回复 待解决
如何通过定时器和画布实现一个时钟
398浏览 • 1回复 待解决
编写一个页面,实现不规则列表
369浏览 • 1回复 待解决
编译一个页面,实现选座场景
348浏览 • 1回复 待解决
一个页面怎么实现多个AbilitySlice?
13097浏览 • 5回复 待解决
编写一个页面,实现吸顶效果
417浏览 • 1回复 待解决
如何在自定义函数中创建一个UI组件
719浏览 • 1回复 待解决
如何创建一个worker线程
398浏览 • 1回复 待解决
利用native接口实现一个圆角矩形
586浏览 • 1回复 待解决