Jetpack Compose Bottom Sheet展开时外部背景无暗淡阴影问题求助

你目前使用的是Jetpack Compose Material 2 版本的BottomSheetScaffold组件，该组件原生没有内置底部抽屉展开时的背景暗淡遮罩能力，可通过以下两种方案解决：

方案1：手动添加遮罩层（适配现有Material 2代码） #

监听底部抽屉的展开状态，动态插入半透明遮罩层，同时支持点击遮罩收起抽屉，修改后的完整代码如下：

// 提前导入所需依赖
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.BottomSheetValue
import androidx.compose.material.rememberBottomSheetScaffoldState
import androidx.compose.material.rememberCoroutineScope
import kotlinx.coroutines.launch

MyApplicationTestTheme {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState()
    val coroutineScope = rememberCoroutineScope()
    // 计算遮罩透明度：完全展开时透明度为0.5，完全收起时为0，可自行调整最大值
    val scrimAlpha = when (bottomSheetScaffoldState.bottomSheetState.currentValue) {
        BottomSheetValue.Collapsed -> 0f
        BottomSheetValue.Expanded -> 0.5f
    } * if (bottomSheetScaffoldState.bottomSheetState.targetValue == BottomSheetValue.Expanded) {
        bottomSheetScaffoldState.bottomSheetState.progress.fraction
    } else {
        1 - bottomSheetScaffoldState.bottomSheetState.progress.fraction
    }

    ProvideWindowInsets {
        BottomSheetScaffold(
            scaffoldState = bottomSheetScaffoldState,
            sheetShape = RoundedCornerShape(topStart = 30.dp,topEnd = 30.dp),
            sheetElevation= 5.dp,
            modifier=Modifier.fillMaxHeight(0.95f).fillMaxWidth(),
            sheetBackgroundColor=Color.Green,
            sheetContent = {
                //Bottom sheet content
            }, 
            sheetPeekHeight = 0.dp
        ) { innerPadding ->
            Box(modifier = Modifier.fillMaxSize()) {
                // 原有页面内容写在此处，注意应用innerPadding
                // 遮罩层
                if (scrimAlpha > 0f) {
                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(Color.Black.copy(alpha = scrimAlpha))
                            .clickable {
                                coroutineScope.launch {
                                    bottomSheetScaffoldState.bottomSheetState.collapse()
                                }
                            }
                    )
                }
            }
        }
   }
}

方案2：切换到Material 3 ModalBottomSheet（原生自带遮罩） #

如果项目支持Material 3，直接使用ModalBottomSheet组件即可默认实现背景遮罩效果，无需手动处理遮罩逻辑，示例代码如下：

import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.material3.ModalBottomSheet

val sheetState = rememberModalBottomSheetState()
val showBottomSheet = remember { mutableStateOf(false) }

// 底部抽屉触发逻辑：showBottomSheet.value = true

if (showBottomSheet.value) {
    ModalBottomSheet(
        onDismissRequest = { showBottomSheet.value = false },
        sheetState = sheetState,
        shape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp),
        containerColor = Color.Green
    ) {
        // Bottom sheet content
    }
}
// 页面内容直接写在外层即可

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