Jetpack Compose Bottom Sheet暗淡的阴影不可见

Question

我已经在jetpack compose中创建了一个底部表单。但是当底层扩展时，背景外的底层不会像通常的底层那样变暗。请帮助。

MyApplicationTestTheme {
ProvideWindowInsets {
BottomSheetScaffold(
scaffoldState = bottomSheetScaffoldState,
sheetShape = RoundedCornerShape(topStart = 30.dp,topEnd = 30.dp),
sheetElevation= 5.dp,
modifier=Modifier.fillMaxHeight(0.95f).fillMaxWidth(),
sheetBackgroundColor=Color.Green,
sheetContent = {
//Bottom sheet content
}, sheetPeekHeight = 0.dp
) {
// Page Content
}
}
}

Answer 1

底部工作表没有默认的dim功能。

您可以使用ModalBottomSheetLayout或BottomDrawer来达到此效果。但是这两个布局都没有peek高度，只有展开状态。

ModalBottomSheetLayout(
sheetState = modalBottomSheetState,
sheetElevation = 8.dp,
sheetContent = {
SheetContent()
}
) {
MainContent(modalBottomSheetState)
}

或

val drawerState = rememberBottomDrawerState(BottomDrawerValue.Closed)
BottomDrawer(
gesturesEnabled = gesturesEnabled,
drawerState = drawerState,
drawerContent = {
},
content = {

}
)

Answer 2

在sheetContent块中添加:

sheetContent = {
val isDimVisible by remember {
derivedStateOf {
bottomSheetScaffoldState.bottomSheetState.targetValue == SheetValue.Expanded
}
}
if (isDimVisible) {
Box(
modifier = Modifier
.fillMaxSize()
.zIndex(1f)
.background(color = BottomSheetDefaults.ScrimColor)
)
}
//Rest of the content
}