如何移除Jetpack Compose中ModalBottomSheet顶部线条并实现透明？

问题 #

我编写了ModalBottomSheet的代码，想要移除其顶部线条并让弹窗实现透明效果，请问是否可行？

我已将containerColor和contentColor设置为透明，但并未生效。

代码如下：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModalBottomPopup(
    showSheet: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    sheetState: SheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = true,
    ),
    shape: Shape = BottomSheetDefaults.ExpandedShape,
    containerColor: Color = Color.Transparent,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomSheetDefaults.Elevation,
    scrimColor: Color = Color.Transparent,
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    windowInsets: WindowInsets = WindowInsets.displayCutout,
    content: @Composable ColumnScope.() -> Unit,
) {
    if (showSheet) {
        ModalBottomSheet(
            onDismissRequest = onDismissRequest,
            modifier = modifier,
            sheetState = sheetState,
            shape = shape,
            containerColor = containerColor,
            contentColor = contentColor,
            tonalElevation = tonalElevation,
            scrimColor = scrimColor,
            dragHandle = dragHandle,
            windowInsets = windowInsets,
        ) {
            content()
        }
    }
}

问题效果示意图：

解决方案 #

完全可行，只需调整两个关键参数：

1. 移除顶部线条 #

顶部的线条是默认的DragHandle组件，直接将dragHandle参数设为null即可移除：

dragHandle = null

2. 实现完全透明 #

你已经设置了containerColor = Color.Transparent，但默认的tonalElevation会添加阴影和背景叠加层，抵消透明效果，需要将其设为0.dp：

tonalElevation = 0.dp

修改后的完整代码 #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ModalBottomPopup(
    showSheet: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    sheetState: SheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = true,
    ),
    shape: Shape = BottomSheetDefaults.ExpandedShape,
    containerColor: Color = Color.Transparent,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = 0.dp,
    scrimColor: Color = Color.Transparent,
    dragHandle: @Composable (() -> Unit)? = null,
    windowInsets: WindowInsets = WindowInsets.displayCutout,
    content: @Composable ColumnScope.() -> Unit,
) {
    if (showSheet) {
        ModalBottomSheet(
            onDismissRequest = onDismissRequest,
            modifier = modifier,
            sheetState = sheetState,
            shape = shape,
            containerColor = containerColor,
            contentColor = contentColor,
            tonalElevation = tonalElevation,
            scrimColor = scrimColor,
            dragHandle = dragHandle,
            windowInsets = windowInsets,
        ) {
            content()
        }
    }
}

补充说明 #

• 如果弹窗内容自身有背景色，需要确保内容的背景也设置为透明，否则会遮挡底层界面
• 你已经正确设置了scrimColor = Color.Transparent，这会让弹窗外部的遮罩透明，不会影响底层内容的显示

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