Material3 ModalBottomSheet如何设置全屏背景图

要给ModalBottomSheet的容器区域设置全屏背景图，核心是让默认的sheet容器背景透明，同时去掉默认内边距，让背景图能完全填充sheet区域。你可以按以下方式修改代码：

ModalBottomSheet(
    sheetState = sheetState,
    content = {
        // 用Box实现背景图与上层内容的层级叠加
        Box(modifier = Modifier.fillMaxSize()) {
            Image(
                painter = painterResource(id = R.drawable.app_background),
                contentDescription = null,
                modifier = Modifier.fillMaxSize(),
                contentScale = ContentScale.Crop
            )
            // 在这里添加你的其他界面内容，比如文本、按钮等
            // Text(text = "底部弹窗内容", modifier = Modifier.align(Alignment.Center))
        }
    },
    onDismissRequest = { pressedBack.invoke() },
    // 关键：将sheet默认容器背景设为透明，避免遮挡背景图
    sheetContainerColor = Color.Transparent,
    // 移除默认内边距，让背景图完全填充sheet区域
    contentPadding = PaddingValues(0.dp),
    // 保留阴影需求可维持原数值，不需要则设为0.dp
    tonalElevation = 20.dp,
)

关键说明： #

• sheetContainerColor = Color.Transparent：取消ModalBottomSheet默认的容器背景色，让content里的背景图能正常显示。
• contentPadding = PaddingValues(0.dp)：移除组件自带的内边距，确保背景图可以铺满整个sheet容器范围。
• 使用Box布局可以轻松在背景图上方叠加其他UI元素，保证界面层级逻辑正确。

背景图会自动适配sheet的不同展开状态（半展开、全屏展开），无需额外处理尺寸适配。

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