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

但這不是我想要的。 我需要為自動“包裝內容”寬度設置動畫。

提前致謝。

Answer 1

您需要向Text Composable 添加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

使用1.0.0 （使用1.0.0-beta09測試），您可以應用修改器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
    )
}