Bottomsheet 显示白色背景

Question

以下是使用Android Jetpack Compose创建底部抽屉的示例代码。一切都运行正常，但显示了白色背景。它应该展示一个带有右上角关闭按钮的圆角底部抽屉。

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetPeekHeight = 0.dp, // 初始高度为0，不显示预览
    sheetElevation = 0.dp, // 抽屉阴影高度设置为0，以便能看到关闭按钮
    sheetGesturesEnabled = false, // 禁止通过手势控制抽屉

    sheetContent = {
        // 在这里放置底部抽屉的内容
    },
    sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), // 设置顶部左右圆角
    sheetBackgroundColor = Color.Transparent, // 背景透明
    backgroundColor = Color.Transparent, // 整个Scaffold背景透明
    drawerBackgroundColor = Color.Transparent, // 不影响底部抽屉，但以防万一也设为透明

) { 

    // 添加一个半透明黑色遮罩层（scrim），当底部抽屉展开时覆盖屏幕其余部分
    if (bottomSheetType != CommonBottomSheetType.None) {
        AnimatedVisibility(
            visible = bottomSheetScaffoldState.bottomSheetState.isExpanded,
            enter = fadeIn(initialAlpha = 0.3f),
            exit = fadeOut(targetAlpha = 1f)
        ) {
            Box(
                modifier = Modifier
                    .alpha(0.9f)
                    .background(Color.Black)
                    .fillMaxSize()
                    // 忽略所有点击事件
                    .pointerInput({}) {}
            )
        }
    }
}

// sheetElevation 设为0是因为需要展示关闭按钮

附图展示了带有白色背景的问题：

user207421 · Answer

尝试以下代码：

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetPeekHeight = 0.dp, // 设置底部抽屉预览高度为0，即完全隐藏直到展开
    sheetElevation = 0.dp, // 底部抽屉阴影高度设为0，消除阴影效果
    sheetGesturesEnabled = false, // 禁用底部抽屉的手势控制
    sheetContent = {
        // 在这里放置你的底部抽屉内容
    },
    sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), // 设置底部抽屉顶部左右圆角为16.dp
    sheetBackgroundColor = Color.Transparent, // 设置底部抽屉背景为透明
    backgroundColor = Color.Transparent, // 设置 Scaffold 背景也为透明
    drawerBackgroundColor = Color.Transparent // （尽管与当前上下文可能无关）设置 Drawer 背景为透明
) {
    // 当底部抽屉展开时，此部分作为一个半透明的遮罩层，覆盖屏幕其余部分
    if (bottomSheetType != CommonBottomSheetType.None) {
        AnimatedVisibility(
            visible = bottomSheetScaffoldState.bottomSheetState.isExpanded, // 根据底部抽屉是否展开决定遮罩层的可见性
            enter = fadeIn(initialAlpha = 0.3f), // 展开时淡入，初始透明度为30%
            exit = fadeOut(targetAlpha = 1f) // 收起时淡出，目标透明度为完全不透明
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize() // 使遮罩层填充整个屏幕
                    .background(Color.Black.copy(alpha = 0.3f)) // 遮罩层背景色为半透明黑色（30%透明度）
                    // 忽略遮罩层上的所有点击事件
                    .pointerInput(Unit) { _ -> } 
            )
        }
    }
}

在此代码段中，我调整了Box组件的修饰器，使用.fillMaxSize()以确保这个充当遮罩层的部分能完全覆盖整个屏幕。同时，将Box的背景颜色更改为Color.Black.copy(alpha = 0.3f)来实现半透明效果，使得当底部抽屉展开时，屏幕上非底部抽屉区域会有一个半透明的黑色遮罩层出现，并且该遮罩层具有淡入淡出动画。

Steve Jessop · Answer

然而，不清楚您期望的具体UI设计是怎样的，您可以考虑以下几点：

白色背景颜色：如果列表项内部组件具有白色背景，您需要检查“Why you extend your listing?”这个组件并移除其背景色。
底部抽屉圆角形状：如果您希望底部抽屉具有圆角形状，您需要为 sheetBackgroundColor 属性添加一个背景颜色，例如使用 MaterialTheme.colors.background.copy(alpha = 0.3f)，这样可以得到半透明效果的同时保持形状。
使用内置动画替代 AnimatedVisibility：建议利用 BottomSheetScaffold 内置的动画特性来控制底部抽屉的显示和隐藏，而非使用 AnimatedVisibility。以下是调整后的代码示例：

BottomSheetScaffold(
    modifier = Modifier // 可选系统内边距
        .navigationBarsPadding() 
        .imePadding()
        .displayCutoutPadding(),
    scaffoldState = bottomSheetScaffoldState,
    backgroundColor = if (bottomSheetType != "NONE") Color.Black.copy(alpha = 0.9f) else Color.Transparent, // 根据条件设置背景色（这里是半透明黑色或透明）
    sheetBackgroundColor = MaterialTheme.colors.background.copy(alpha = 0.3f), // 底部抽屉背景为半透明主题背景色
    sheetElevation = 0.dp, // 抽屉阴影高度设为0dp
    sheetShape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp), // 设置顶部两侧圆角为8.dp
    sheetPeekHeight = 0.dp, // 预览高度设为0dp，即完全展开才可见
    sheetContent = {
        Column(Modifier.padding(16.dp)) {
            Icon(
                modifier = Modifier.padding(vertical = 16.dp),
                imageVector = Icons.Rounded.Close,
                contentDescription = ""
            )

            Text(text = "Hello World")
            Text(text = "Hello World")
            Text(text = "Hello World")
            Text(text = "Hello World")
        }
    }
) {}

附带一张示意图链接：

这段代码中，底部抽屉在展开时将呈现带有圆角、半透明背景的内容，并且根据条件设置了整个 Scaffold 的背景颜色。同时，它还利用了 BottomSheetScaffold 的默认动画效果，并对内容区域进行了布局和样式设定。