在 Jetpack Compose 中滚动时在列和行之间设置动画过渡

Question

当我在列表中滚动时，我希望可组合的粘性标题缩小。在缩小期间，布局应通过滚动状态进行动画处理，以从列布局切换到行布局。

Jetpack Compose 有什么办法可以实现这一点吗？

它应该看起来像这样：

Answer 1

你可以尝试使用MotionLayout\xe2\x80\x93 它类似于约束布局但更好：

\n

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

\n

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

\n

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

\n

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

\n

\n

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

   \n

   valscrollState = RememberScrollState()\nvalprogress = (scrollState.value.toFloat() / 100).takeIf { it <= 1 } ?: 1f

   \n
\n

2. 创造MotionLayout：

   \n

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

   \n
\n

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

   \n

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

   \n
\n

\n

滚动的结果

\n