Jetpack Compose布局调整：基于用户点击事件控制组件显隐

Hey there! 你提到的重复创建布局的方式确实会带来不必要的性能开销，Jetpack Compose的状态驱动UI特性正好能完美解决这个问题——不需要重复加载布局，只需要通过状态来控制组件的可见性就好，这也是官方推荐的最优方案。

核心实现思路 #

利用Compose的状态管理能力，用一个可观察的布尔状态变量标记组件的显示状态，然后在布局中根据这个状态决定是否渲染组件，或者通过Visibility组件精细化控制可见性。这种方式只会在状态变化时触发最小化的UI更新，完全避免了重复布局的性能浪费。

代码示例 #

下面是两种常用的实现方式，你可以根据场景选择：

@Composable
fun ToggleableLayoutDemo() {
    // 用remember + mutableStateOf创建可观察状态，初始值设为true表示默认显示
    val isComponentVisible = remember { mutableStateOf(true) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        // 点击按钮切换显示状态
        Button(onClick = { isComponentVisible.value = !isComponentVisible.value }) {
            Text(text = if (isComponentVisible.value) "隐藏组件" else "显示组件")
        }

        // 方式1：直接从布局树中添加/移除组件（性能最优）
        if (isComponentVisible.value) {
            Card(
                modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
            ) {
                Text(
                    text = "可控制显示隐藏的内容",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }

        // 方式2：用Visibility组件控制可见性（支持保留组件状态+过渡动画）
        Visibility(
            visible = isComponentVisible.value,
            // 可选：添加过渡动画提升用户体验
            enter = fadeIn() + expandVertically(),
            exit = fadeOut() + shrinkVertically(),
            // 设置为Gone时，组件不可见且不占用布局空间
            visibility = if (isComponentVisible.value) Visibility.Visible else Visibility.Gone
        ) {
            Card(
                modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
                elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
            ) {
                Text(
                    text = "带动画的可控制显示隐藏内容",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}

两种方式的适用场景 #

• 方式1：当状态为false时，组件会完全从Compose布局树中移除，不会进行任何绘制、布局计算，性能最优，适合不需要保留组件内部状态（比如临时展示的提示卡片）的场景。
• 方式2：使用Visibility组件时，组件仍然存在于布局树中（只是不可见），适合需要保留组件状态（比如输入框的文本内容）的场景，还能轻松添加过渡动画提升交互体验。

这种状态驱动的实现方式完全贴合Compose的设计理念，代码简洁且性能高效，完全替代了重复加载布局的低效方案。

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