android - 如何在 Jetpack Compose 中为按钮的宽度设置动画

Question

假设我有一个这样的可组合：

@Composable
fun LoadingButton() {
    val (isLoading, setIsLoading) = state { false }

    Button(
        onClick = setIsLoading,
        text = {
            if (isLoading) {
                Text(text = "Short text")
            } else {
                Text(text = "Very very very long text")
            }
        }
    )
}

如何为按钮的宽度更新设置动画？

我很清楚我可以为按钮添加一个 preferredWidth 修饰符，并使用以下方式为这个宽度设置动画：

val buttonWidth = animate(target = if (isLoading) LoadingButtonMinWidth else LoadingButtonMaxWidth)

但这不是我想要的。我需要为自动“包装内容”宽度设置动画。

提前致谢。

标签： androidandroid-buttonandroid-jetpack-compose

Answer 1

您需要向Composable添加一个animateContentSize修饰符：Text

@Composable
fun LoadingButton() {
    val (isLoading, setIsLoading) = state { false }
    Button(onClick = { setIsLoading(!isLoading) }) {
        Text(
            text = if (isLoading) {
               "Short text"
            } else {
                "Very very very long text"
            },
            modifier = Modifier.animateContentSize()
        )
    }
}