Jetpack compose 动画剪辑问题

Question

我正在尝试在内容更改时创建动画。问题是行的高度在动画过程中发生了变化，所以它会上下跳跃，即使我将裁剪设置为 false。我正在尝试从 Google 复制看起来像

的示例

更新： alignBy(LastBaseline) 似乎是问题所在。如果我删除它，它会起作用。

可组合看起来像这样：

@Composable
fun StatisticsRow() {
    var count by remember { mutableStateOf(0) }

    Column {
        Row(
            modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.alignBy(LastBaseline).weight(1f)
            ) {
                AnimatedDays(count)
                Text("Days", style = MaterialTheme.typography.body1)
            }
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.alignBy(LastBaseline).weight(1f)
            ) {
                Box {
                    val image: Painter = painterResource(id = R.drawable.ic_baseline_medal_24)
                    Image(painter = image, contentDescription = "")
                }
                Text("Achievements", style = MaterialTheme.typography.body1)
            }
        }
        Button(onClick = { count++ }) { Text("Click me") }
    }
}

@OptIn(ExperimentalAnimationApi::class)
@Composable
private fun AnimatedDays(count: Int) {
    AnimatedContent(targetState = count,
        transitionSpec = {
            if (targetState > initialState) {
                slideInVertically({ height -> height }) + fadeIn() with
                        slideOutVertically({ height -> -height }) + fadeOut()
            } else {
                slideInVertically({ height -> -height }) + fadeIn() with
                        slideOutVertically({ height -> height }) + fadeOut()
            }.using(SizeTransform(clip = false))
        }
    ) { targetCount ->
        Text(targetCount.toString(), style = MaterialTheme.typography.h4)
    }
}

Answer 1

问题是 alignBy(LastBaseline)。删除它，代码就可以工作了。