Jetpack Compose中如何在保留按钮尺寸的前提下显示/隐藏按钮

你可以通过单个Button实例结合条件控制动画与透明度的方式，避免重复代码，同时满足隐藏时不运行动画、不影响布局的需求。核心思路是：根据showButton状态，统一控制按钮的透明度、动画开关以及交互状态，无需拆分两个Button。

优化后的代码 #

@Composable
fun Example(showButton: Boolean) {
    Column {
        // 仅在需要显示按钮时创建并运行无限动画
        val buttonScale = if (showButton) {
            val infiniteTransition = rememberInfiniteTransition()
            infiniteTransition.animateFloat(
                initialValue = 1f,
                targetValue = 1.005f,
                animationSpec = infiniteRepeatable(
                    animation = tween(durationMillis = 500, easing = LinearEasing),
                    repeatMode = RepeatMode.Reverse
                )
            ).value
        } else {
            // 隐藏时保持原始尺寸，不触发动画
            1f
        }

        Button(
            onClick = {
                // 仅在按钮显示时响应点击逻辑
                if (showButton) {
                    // TODO: 处理点击事件
                }
            },
            modifier = Modifier
                .alpha(if (showButton) 1f else 0f)
                .graphicsLayer(scaleX = buttonScale, scaleY = buttonScale),
            enabled = showButton
        ) {
            Text(text = "Button")
        }
        Text(text = "Text")
    }
}

方案说明 #

• 消除重复代码：只用一个Button实例，通过showButton状态统一控制所有属性，无需维护两份相同的按钮代码。
• 动画按需执行：仅当按钮需要显示时，才初始化并播放无限缩放动画；隐藏时直接使用固定的1f缩放值，不会启动动画逻辑。
• 布局保持稳定：通过Modifier.alpha控制可见性，按钮始终占据布局空间，不会影响下方Text的位置。
• 交互状态可控：将enabled绑定到showButton，同时在点击事件内增加状态判断，确保隐藏时按钮无交互响应。

内容的提问来源于stack exchange，提问作者Matteo Zattera