如何在 Jetpack Compose 中添加/删除按钮，同时保留其大小

Question

我有一个按钮可组合项，我想隐藏/显示它而不影响周围可组合项的位置。例如，以下代码用于删除/添加按钮而不使文本“Text”上升：

@Composable
fun Example(showButton: Boolean) {
    Column {
        Button(
            onClick = { /*TODO*/ },
            modifier = Modifier.alpha(if (showButton) 1f else 0f),
            enabled = showButton
        ) {
            Text(text = "Button")
        }
        Text(text = "Text")
    }
}

这段代码工作得很好，但是如果我向按钮添加无限动画，我的代码就会变成这样：

@Composable
fun Example(showButton: Boolean) {
    Column {
        if (showButton) {
            val infiniteTransition = rememberInfiniteTransition()
            val buttonScale by infiniteTransition.animateFloat(
                initialValue = 1f,
                targetValue = 1.005f,
                animationSpec = infiniteRepeatable(
                    animation = tween(durationMillis = 500, delayMillis = 0, easing = LinearEasing),
                    repeatMode = RepeatMode.Reverse
                )
            )
            Button(
                onClick = { /*TODO*/ },
                modifier = Modifier.graphicsLayer(scaleX = buttonScale, scaleY = buttonScale)
            ) {
                Text(text = "Button")
            }
        } else {
            Button(
                onClick = {},
                modifier = Modifier.alpha(0f),
                enabled = false
            ) {
                Text(text = "Button")
            }
        }
        Text(text = "Text")
    }
}

我选择将

infiniteTransition

和

buttonScale

放在 if 语句中，这样如果删除按钮，动画将不会运行，但现在我有两个按钮可组合项，我必须保持相同以保持相同的大小，以免影响周围元素的位置（仅在我的示例中是文本）。

我的问题是：有没有更好的方法来解决这个问题？我不认为我的“解决方案”是一个好的做法。

谢谢。

Answer 1

您可以按如下方式控制

showButton

中的

Modifer.alpha

。否则，随着代码的增长，代码将会变得非常重复。您还需要设置

enabled

的

Button

值。否则，即使按钮不可见，也可以单击。这个也要考虑到

@Composable
fun Example(showButton: Boolean) {
    Column {
        val infiniteTransition = rememberInfiniteTransition()
        val buttonScale by infiniteTransition.animateFloat(
            initialValue = 1f,
            targetValue = 1.005f,
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = 500,
                    delayMillis = 0,
                    easing = LinearEasing
                ),
                repeatMode = RepeatMode.Reverse
            )
        )

        Button(
            onClick = {},
            modifier = Modifier
                .graphicsLayer(scaleX = buttonScale, scaleY = buttonScale)
                .alpha(if (showButton) 1f else 0f),
            enabled = showButton

        ) {
            Text(text = "Button")
        }

        Text(text = "Text")
    }
}