输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
FAQ
FAQ应用框架开发UI框架UI界面如何实现List的折叠动画效果

如何实现List的折叠动画效果

更新时间: 2026-06-26 09:07

可以使用显式动画animateTo结合条件渲染if控制 ListItem内容区域的展开和收起，示例代码如下：

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct ListCollapseExpand {
  4.   private numberList: number[] = [0, 1, 2, 3, 4, 5, 6];
  5.   @State isContentShow: boolean = true;
  6.   @State selectItem: number = 0;
  7. 

  8.   build() {
  9.     Column() {
  10.       List({ initialIndex: 0 }) {
  11.         ForEach(this.numberList, (item: number, index: number) => {
  12.           ListItem() {
  13.             Column() {
  14.               Row() {
  15.                 Text(item.toString())
  16.                 Button(this.isContentShow && this.selectItem === item ? 'Collapse' : 'Expand')
  17.                   .onClick(() => {
  18.                     this.getUIContext().animateTo({
  19.                       duration: 300,
  20.                       onFinish: () => {
  21.                         console.info('animation end');
  22.                       }
  23.                     }, () => {
  24.                       this.isContentShow = !this.isContentShow;
  25.                       this.selectItem = item;
  26.                     })
  27.                   })
  28.               }
  29.               .width('100%')
  30.               .justifyContent(FlexAlign.SpaceBetween)
  31. 

  32.               // Display the content area only when the current item is selected and is in an expanded state.
  33.               if (this.isContentShow && this.selectItem === item) {
  34.                 Text('This is the content area')
  35.                   .backgroundColor(Color.Gray)
  36.                   .width('100%')
  37.                   .height(100)
  38.               }
  39.             }
  40.             .backgroundColor(0xFFFFFF)
  41.             .width('100%')
  42.             .padding({
  43.               top: 12,
  44.               bottom: 12
  45.             })
  46.             .margin({ top: 10 })
  47.           }
  48.         }, (item: string) => item.toString())
  49.       }
  50.       .scrollBar(BarState.Off)
  51.       .height('100%')
  52.       .width('100%')
  53.     }
  54.     .backgroundColor(0xF1F3F5)
  55.     .padding(12)
  56.   }
  57. }
使用Canvas如何实现部分区域镂空的效果
bindPopup适配Web组件长按菜单功能，设置offset控制弹窗的偏移
相关推荐
文档List如何实现滑动翻页效果
文档List实现树视图
文档如何实现简单列表折叠和展开
文档List列表子组件按照顺序动画展示
文档如何通过List组件实现可自动循环滚动的列表
文档List组件的item如何实现渐入渐出显示效果
文档如何实现拖拽时列表项占位动画的效果
文档如何使用图片实现旋转加载效果
文档Slider交互与动画控制
示例代码实现阅读器翻页效果
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词