在 Jetpack Compose 中滚动时在列和行之间进行动画转换答案

【问题标题】：Animate transition between column and row while scrolling in Jetpack Compose在 Jetpack Compose 中滚动时在列和行之间进行动画转换
【发布时间】：2022-10-07 18:32:26
【问题描述】：

当我在列表中滚动时，我希望可组合的粘性标题缩小。在收缩过程中，布局应该通过滚动状态从列布局切换到行布局。

有什么方法可以在 Jetpack Compose 中实现这一点？

它应该如下所示：

有谁知道如何实现这一目标？我还没有弄清楚如何做到这一点。

标签： android kotlin animation android-jetpack-compose android-transitions

【解决方案1】：

您可以尝试使用MotionLayout - 它类似于约束布局，但要好得多：

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

首先创建一个json5格式的运动场景。对于您的情况，它将是这样的：

{
  ConstraintSets: {
    start: {
      value: {
        start: [ 'parent', 'start' ],
        top: [ 'parent', 'top' ],
      },
      title: {
        start: [ 'parent', 'start' ],
        top: [ 'value', 'bottom' ],
      }
    },
    end: {
      value: {
        top: [ 'parent', 'top' ],
        start: [ 'title', 'end' ],
      },
      title: {
        start: [ 'parent', 'start' ],
        top: [ 'parent', 'top' ],
      }
    }
  }
}

MotionLayout 获取 3 个必需参数：motionScene（上面带有 json5 的字符串）、内容（您的可组合）和进度值（从 0 到 1 的浮点数）。

创建滚动状态和进度计算：

val scrollState = rememberScrollState() val 进度 = (scrollState.value.toFloat() / 100).takeIf { it <= 1 } ?: 1f

创建MotionLayout：

 MotionLayout(
     motionScene = MotionScene(<json5 string>),
     progress = progress
 ) {
     Text(modifier = Modifier.layoutId("value"), text = "Value")
     Text(modifier = Modifier.layoutId("title"), text = "Title")
 }

将scrollState 连接到您的可滚动内容：

 Column(modifier = Modifier.verticalScroll(scrollState)) {
     repeat(20) {
         Text(
             modifier = Modifier
                 .fillMaxWidth()
                 .padding(16.dp),
             text = it.toString()
         )
     }
 }

the result of scrolling

【讨论】：