Jetpack Compose：如何让sheetContent仅在底部面板展开时执行、隐藏时销毁

Jetpack Compose里的ModalBottomSheetLayout（或BottomSheetScaffold）默认会直接执行sheetContent的lambda，哪怕面板处于隐藏状态，这会导致不必要的组件初始化和资源消耗。要实现仅在面板展开时创建内容、隐藏时销毁的效果，核心思路是利用Compose的条件重组特性，结合底部面板的状态来控制内容渲染。

具体实现步骤 #

• 先获取底部面板的状态实例，通过状态的isVisible属性判断面板是否展开
• 在sheetContent中添加条件判断：仅当面板展开时渲染实际内容，隐藏时返回空组件

代码示例 #

@Composable
fun ConditionalBottomSheet() {
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            // 仅当面板可见时才渲染实际内容
            if (sheetState.isVisible) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 16.dp, vertical = 24.dp)
                ) {
                    Text(text = "底部面板内容", fontSize = 18.sp)
                    Spacer(modifier = Modifier.height(16.dp))
                    Button(
                        onClick = { scope.launch { sheetState.hide() } },
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Text("关闭面板")
                    }
                }
            } else {
                // 隐藏时返回空组件，避免不必要的渲染
                Box(modifier = Modifier.size(0.dp))
            }
        },
        content = {
            // 主内容区域
            Column(
                modifier = Modifier.fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(onClick = { scope.launch { sheetState.show() } }) {
                    Text("打开底部面板")
                }
            }
        }
    )
}

原理说明 #

• Compose的重组机制会根据状态变化更新UI：当sheetState.isVisible从false变为true时，才会执行if分支的代码，创建底部面板的内容组件
• 当面板隐藏（isVisible变为false）时，else分支的空组件会替代原来的内容，Compose会自动销毁之前创建的面板组件及其内部状态（比如LaunchedEffect、remember变量等），完全符合需求

如果使用的是BottomSheetScaffold，逻辑完全一致，只需要替换对应的布局组件即可。

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