HarmonyOS 鸿蒙Next 这种列表如何实现展开与收起的过渡效果

发布于 1周前 作者 yuanlaile 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 这种列表如何实现展开与收起的过渡效果

展开与收起已经实现，但是展开与收起的过渡效果还没有（折叠效果），如下图

cke_2049.png


更多关于HarmonyOS 鸿蒙Next 这种列表如何实现展开与收起的过渡效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复
没有一个官方组件来支持这么基本的功能吗？

更多关于HarmonyOS 鸿蒙Next 这种列表如何实现展开与收起的过渡效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大佬知道吗？

@Entry
@Component
struct CollapsePage {
  @StorageLink('interact') interact: boolean = true;

  @State isShow:boolean = false
  @State ht:number = 100
  @State textHt:number = 20
  build() {
    Column(){
      Row() {
        Text('属性动画折叠')
          .height(30)
          .fontSize(24)
          .fontColor(Color.White)

        Text() {
          SymbolSpan(this.ht == 0 ? $r('sys.symbol.chevron_up') : $r('sys.symbol.chevron_down'))
            .fontSize(24)
            .fontColor([Color.White])
        }
        // .onClick(()=>{
        //   this.ht = this.ht == 0 ? 100: 0
        //   this.textHt = this.textHt == 0 ? 20: 0
        // })
        .onClick(()=>{
          animateTo({
            duration: 300,
            curve: Curve.Linear
          },()=>{
            this.textHt = this.textHt == 0 ? 20: 0
            this.ht = this.ht == 0 ? 100: 0
          })
        })
      }
      .width('100%')
      .backgroundColor(Color.Black)
      .justifyContent(FlexAlign.SpaceBetween)

      Column(){
        Text('我是文本文本文本文本文本文本').width('100%')
          .fontSize(18)
          .height(this.textHt)
          .animation({
            duration: 300,
            curve: Curve.Linear
          })
          .fontColor(Color.White)
          .backgroundColor(Color.Black)
        Text('我是文本文本文本文本文本文本').width('100%')
          .fontSize(18)
          .height(this.textHt)
          .animation({
            duration: 300,
            curve: Curve.Linear
          })
          .fontColor(Color.White)
          .backgroundColor(Color.Black)
      }
      .backgroundColor(Color.Black)
      .height(this.ht)
      .width('100%')
      .animation({
        duration: 300,
        curve: Curve.Linear
      })
      .alignItems(HorizontalAlign.Start)
    }
    .foregroundBlurStyle(this.interact ? BlurStyle.NONE : BlurStyle.COMPONENT_ULTRA_THICK)
  }
}

在HarmonyOS 鸿蒙Next系统中，实现列表的展开与收起过渡效果，可以通过动画和状态管理来实现。具体步骤如下：

  1. 状态管理：为列表项设置一个布尔状态变量，用于表示当前项是展开还是收起。这个状态变量可以通过数据绑定与UI组件关联。

  2. 动画资源：在资源文件中定义展开与收起的动画效果，比如高度变化、透明度变化等。

  3. 监听状态变化：通过监听状态变量的变化，触发相应的动画。当状态从收起变为展开时，启动展开动画；反之，启动收起动画。

  4. 动画执行：利用鸿蒙提供的动画API，将定义的动画资源应用到列表项上，实现平滑的过渡效果。

  5. 布局调整：根据状态变量的值，动态调整列表项的高度或可见性，以适应展开或收起的状态。

示例代码（伪代码）：

@Entry
@Component
struct ListItem {
  @State isExpanded: boolean = false;

  @Builder toggle() {
    isExpanded = !isExpanded;
    // 触发动画
  }

  build() {
    Column() {
      // 根据isExpanded动态调整内容
      if (isExpanded) {
        // 显示展开内容，并应用展开动画
      } else {
        // 显示收起内容，并应用收起动画
      }
    }
  }
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部