BottomSheetScaffold 正在覆盖其父级的背景颜色

Question

我正在尝试 BottomSheetScaffold，我刚刚在使用它时发现了一个奇怪的行为（可能是一个错误）。

我把它放在背景色为青色的 Box { } 中：

composable(route = "my_route") {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.Cyan),
    ) {
        val coroutineScope = rememberCoroutineScope()
        val bottomSheetScaffoldState = rememberBottomSheetScaffoldState()

        BottomSheetScaffold(
            scaffoldState = bottomSheetScaffoldState,
            sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
            sheetPeekHeight = 0.dp,
            sheetBackgroundColor = Color.Red,
            sheetContent = {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(96.dp)
                )
            }
        ) { }

        LaunchedEffect(key1 = null) {
            delay(1_500)
            coroutineScope.launch {
                bottomSheetScaffoldState.bottomSheetState.expand()
            }
        }

        Text(
            modifier = Modifier
                .align(alignment = Alignment.Center),
            text = "Hello World",
            fontSize = 28.sp
        )
    }
}

但是当我运行应用程序并检查该屏幕时，青色背景颜色消失了：

背景部分应该是这样的：

我是不是忘了做某事，这是预期的行为还是错误？

Answer 1

白色来自MaterialTheme.colors.background，这是BottomSheetScaffold.backgroundColor参数的默认值。它绘制在您的 Box 背景之上，因此不可见。

这里也不需要Box，它的目的是将内容放在content参数中：

val coroutineScope = rememberCoroutineScope()
val bottomSheetScaffoldState = rememberBottomSheetScaffoldState()

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
    sheetPeekHeight = 0.dp,
    sheetBackgroundColor = Color.Red,
    backgroundColor = Color.Cyan,
    sheetContent = {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(96.dp)
        )
    }
) {
    LaunchedEffect(key1 = null) {
        delay(1_500)
        coroutineScope.launch {
            bottomSheetScaffoldState.bottomSheetState.expand()
        }
    }
    Box(Modifier.fillMaxSize()) {
        Text(
            modifier = Modifier
                .align(alignment = Alignment.Center),
            text = "Hello World",
            fontSize = 28.sp
        )
    }
}

BottomSheetScaffold 正在覆盖其父级的背景颜色

BottomSheetScaffold is overriding the background color of its parent

android

bottom-sheet

android-jetpack-compose