Jetpack Compose中ModalBottomSheet问题：遮罩无动画及右上角白线

问题1：遮罩右上角的白线 #

原因：你用dragHandle = { Text(text = "") }作为拖拽手柄，空Text组件会导致拖拽手柄区域布局计算异常，进而在遮罩层边缘出现绘制瑕疵。

解决方法：使用官方提供的DragHandle()组件替代空Text，若不需要拖拽手柄，直接将dragHandle参数设为null即可。

问题2：遮罩颜色无动画效果 #

原因：直接设置固定的scrimColor值，未关联底部弹窗的展开/收起进度，导致遮罩颜色无法随弹窗状态变化产生过渡动画。

解决方法：通过sheetState.progress获取弹窗的展开进度（0到1区间），动态计算遮罩颜色的透明度，结合animateColorAsState实现平滑过渡效果。

修改后的完整代码 #

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }

// 根据弹窗进度动态计算遮罩颜色
val scrimColor by animateColorAsState(
    targetValue = if (showBottomSheet) {
        Color.Black.copy(alpha = 0.63f * sheetState.progress.fraction)
    } else {
        Color.Transparent
    },
    animationSpec = tween(durationMillis = 250)
)

Button(onClick = {
    showBottomSheet = true
}) {
    Icon(Icons.Filled.Add, contentDescription = "")
    Text("Show bottom sheet")
}

if (showBottomSheet) {
    ModalBottomSheet(
        onDismissRequest = { showBottomSheet = false },
        sheetState = sheetState,
        // 使用官方DragHandle组件，或设为null隐藏手柄
        dragHandle = { DragHandle() },
        scrimColor = scrimColor,
        containerColor = Color.White,
        modifier = Modifier.height(280.dp),
        windowInsets = WindowInsets(0,0,0,0)
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxSize().padding(16.dp)
        ) {
            Text(text = "This is a bottom sheet")
            Spacer(modifier = Modifier.height(16.dp))
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}

额外说明 #

• sheetState.progress.fraction代表弹窗当前的展开比例，从0（完全收起）到1（完全展开），用它控制遮罩透明度，即可实现随弹窗状态变化的动画。
• 若无需拖拽手柄，直接设置dragHandle = null，彻底避免空组件引发的布局问题。

内容的提问来源于stack exchange，提问作者M Sarmad Qadeer