如何让BottomSheet中LazyVerticalGrid的CameraPreview全屏显示并置于顶层

要解决CameraPreview全屏后被遮挡的问题，核心思路是把全屏状态的CameraPreview从BottomSheet的布局层级中抽离出来，放到更高的层级（和BottomSheet同级），利用Compose的布局叠加特性让它置于顶层。以下是具体实现：

修改后的完整代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheetImagePicker(onDismiss: () -> Unit) {
    val context = LocalContext.current
    val imageUris = getAllImageUris(context)
    // 控制Camera全屏显示的状态，提升到当前组件顶层
    val isCameraFullScreen = remember { mutableStateOf(false) }

    // 用Box实现层级叠加，全屏Camera放在最后，自然处于顶层
    Box(modifier = Modifier.fillMaxSize()) {
        ModalBottomSheet(onDismissRequest = onDismiss) {
            LazyVerticalGrid(
                columns = GridCells.Fixed(3),
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp),
                modifier = Modifier.fillMaxSize()
            ) {
                item(span = { GridItemSpan(2) }) {
                    // 缩略版Camera预览，点击触发全屏
                    CameraPreviewScreen(selected = false) {
                        isCameraFullScreen.value = true
                    }
                }
                item() {
                    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
                        ImageItem(imageUris[0])
                        ImageItem(imageUris[1])
                    }
                }
                val otherImages = imageUris.drop(2)
                items(otherImages) { uri ->
                    ImageItem(uri)
                }
            }
        }

        // 全屏Camera预览，仅在isCameraFullScreen为true时显示
        if (isCameraFullScreen.value) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Black)
                    .clickable { isCameraFullScreen.value = false } // 点击任意位置关闭全屏
            ) {
                CameraPreviewScreen(selected = true) {
                    // 这里可以处理拍照完成后的逻辑，比如关闭全屏+返回图片
                    isCameraFullScreen.value = false
                }
            }
        }
    }
}

关键实现细节 #

• 层级分离：通过Box布局将BottomSheet和全屏CameraPreview放在同一层级，全屏Camera作为Box的最后一个子项，Compose渲染时后添加的元素会自动覆盖在前面的元素之上，彻底避免被BottomSheet内的Grid元素遮挡。
• 状态控制：用isCameraFullScreen状态统一控制全屏预览的显示/隐藏，替代原来的局部状态，确保状态能穿透层级生效。
• 交互优化：给全屏Camera的背景添加点击事件，方便用户快速退出全屏模式；也可以根据需求添加动画过渡（比如用AnimatedVisibility替代普通if，实现淡入淡出效果）。
• Telegram式体验：这种方案和Telegram图片选择器的逻辑一致——缩略预览在BottomSheet内，全屏预览直接覆盖整个屏幕，不受BottomSheet的布局限制。

内容的提问来源于stack exchange，提问作者رضا پریور