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

Question

当我在列表中滚动时，我希望可组合的粘性 header 缩小。 在收缩期间，布局应通过滚动动画 state 从列布局切换到行布局。

有什么办法可以在 Jetpack Compose 中实现这一目标吗？

它应该是这样的：

Answer 1

您可以尝试使用MotionLayout – 它类似于 Constraint Layout 但更好：

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 浮动）。

1. 创建卷轴state及进度计算：

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

2. 创建MotionLayout ：

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

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

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

滚动的结果