如何在 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)

但这不是我想要的。我需要为自动 "wrap-content" 宽度设置动画。

提前致谢。

Answer 1

您需要向 Text 可组合项添加 animateContentSize 修饰符：

@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()
        )
    }
}

Answer 2

您可以应用修饰符 animateContentSize

当它的子修饰符（或者子可组合项，如果它已经在链的尾部）改变大小时，这个修饰符会为它自己的大小设置动画。这允许父修改器观察到平滑的大小变化，从而导致整体连续的视觉变化。

类似于：

var isLoading by remember { mutableStateOf(false) }
val text = if (isLoading) "Short text" else "Very very very long text"

Button(onClick = { isLoading = !isLoading },
    modifier = Modifier
        .animateContentSize(
              animationSpec = tween(durationMillis = 300,
                   easing = LinearOutSlowInEasing))
) {
    Text(
        text = text,textAlign = TextAlign.Center
    )
}

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

How to animate width of a button in Jetpack Compose

android

android-button

android-jetpack-compose