Modal Bottom Sheet无法在Dialog内弹出 显示在父屏幕问题

Compose的Dialog会创建独立于宿主页面的全新窗口，不属于原页面视图树的子节点。你当前实现里ModalBottomSheetLayout写在Dialog外层，挂载在宿主页面的视图树上，它的遮罩和弹窗内容只会覆盖宿主页面窗口，无法穿透到Dialog的独立窗口里，因此点击相机图标时底部弹窗只会显示在父级屏幕，不会出现在Dialog内部。

把ModalBottomSheetLayout移动到Dialog的内容区域内部，让它和Dialog内的表单、图标等UI处于同一个窗口视图树内，底部弹窗就会被限制在Dialog窗口范围内正常弹出。

修正后的完整代码如下：

@OptIn(ExperimentalMaterialApi::class, ExperimentalComposeUiApi::class)
@Composable
fun AddItemDialog(
    onConfirmClicked: () -> Unit,
    onDismiss: () -> Unit
) {
    // 底部弹窗状态直接定义在Dialog作用域内
    val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()
    val nameText = rememberSaveable { mutableStateOf("") }
    val quantityText = rememberSaveable { mutableStateOf("") }
    val unitText = rememberSaveable { mutableStateOf("") }
    val ppuText = rememberSaveable { mutableStateOf("") }
    val notesText = rememberSaveable { mutableStateOf("") }
    var categoryText = rememberSaveable { mutableStateOf("") }

    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        // ModalBottomSheetLayout放在Dialog内容层的最外层，和Dialog其他UI处于同一窗口
        ModalBottomSheetLayout(
            sheetContent = {
                Column {
                    Text(text = "Testing")
                    Text(text = "Testing")
                    Text(text = "Testing")
                    Text(text = "Testing")
                    Text(text = "Testing")
                    Text(text = "Testing")
                }
            },
            sheetState = sheetState,
        ) {
            Surface(
                shape = MaterialTheme.shapes.medium,
                color = MaterialTheme.colors.surface,
                modifier = Modifier
                    .width(LocalConfiguration.current.screenWidthDp.dp * 0.96f)
                    .padding(4.dp)
            ) { 
                // 原有Dialog内部表单内容保持不变
                // ...
                
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                        .requiredHeight(70.dp)
                        .padding(10.dp)
                ) {
                    Icon(
                        painterResource(id = R.drawable.ic_baseline_photo_camera_24),
                        contentDescription = "Add Item Picture",
                        modifier = Modifier
                            .size(40.dp)
                            .clickable(onClick = {
                                scope.launch {
                                    sheetState.show()
                                }
                            })
                    )
                }
            }
        }
    }
}

• 原来外层包裹的AddItemDialogWithModalSheet可以直接废弃，直接调用修改后的AddItemDialog即可
• ModalBottomSheetLayout需要作为Dialog内容的最外层容器，不要在Dialog和该组件之间插入其他打断层级的布局，避免显示范围异常
• 如果需要调整底部弹窗的圆角、初始高度、手势逻辑，直接修改ModalBottomSheetLayout和sheetState的对应参数即可，组件会自动适配Dialog的窗口尺寸

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