android - 在bottomSheetScaffold中设置背景透明

Question

我想在 jetpack compose 中为 bottomsheetscaffold 设置透明背景，但是当我启动应用程序时，背景是默认的。如何为 Jetpack Compose Bottom Sheet 设置黑色透明背景？ (像xml中的BottomSheetDialogFragment)？

@Composable
fun BottomSheet(
    modifier: Modifier = Modifier,
    title: String,
    content: String,
    buttonText: String,
    composable: @Composable () -> Unit,
    isOpen: (Boolean) -> Unit
) {
    val coroutineScope = rememberCoroutineScope()
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Expanded)
    )
    BottomSheetScaffold(
        sheetBackgroundColor = Color.Transparent,
        scaffoldState = bottomSheetScaffoldState,
        sheetGesturesEnabled = false,
        sheetContent = {
            Column(
                Modifier
                    .fillMaxWidth()
                    .padding(8.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    text = title,
                    style = AppFont.PoppinsTypography.button
                )
                Spacer(modifier = modifier.size(8.dp))
                Text(
                    text = content,
                    style = AppFont.PoppinsTypography.body1
                )
                Spacer(modifier = modifier.size(16.dp))
                Button(colors = ButtonDefaults.buttonColors(
                    backgroundColor = AppColor.brandColor.BLUE_DE_FRANCE,
                    contentColor = AppColor.neutralColor.DOCTOR
                ),
                    shape = RoundedCornerShape(
                        small
                    ),
                    onClick = {
                        coroutineScope.launch {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                            isOpen.invoke(false)
                        }
                    }) {
                    Text(
                        text = buttonText,
                        style = AppFont.PoppinsTypography.button
                    )
                }
            }
        },
        sheetShape = RoundedCornerShape(topEnd = medium, topStart = medium),
        sheetPeekHeight = 0.dp,
        drawerGesturesEnabled = false
    ) {
        composable()
    }

}

Answer 1

尝试将您的 sheetBackgroundColor = Color.Transparent 更改为您想要使用的任何颜色

评论中下面提到的示例:

@ExperimentalMaterialApi
@Composable
fun Sheet() {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Expanded)
    )
    BottomSheetScaffold(
        sheetContent = {
            Box(modifier = Modifier.height(300.dp).fillMaxWidth().background(Color.Gray)) {
                LazyColumn(modifier = Modifier
                    .fillMaxSize()
                    .padding(10.dp)
                ) {
                    items(100) {
                        Text(text = "Sheet item $it")
                        Spacer(modifier = Modifier.height(10.dp))
                    }
                }
            }
        },
        scaffoldState = bottomSheetScaffoldState,
        sheetPeekHeight = 100.dp,
        sheetShape = RoundedCornerShape(10.dp),
        sheetBackgroundColor = Color.Transparent
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.Green),
            contentAlignment = Alignment.Center
        ) { Text(text = "Content") }
    }
}

现在您可以将 Color.Green 更改为 Color.Transparent，但我不明白您为什么要将其设置为透明。