将视图系统中的应用程序迁移到 Jetpack compose。
底片稀松布颜色显示在当前应用程序的状态栏上。
如何在 Jetpack compose 中重现相同的内容?
使用视图的应用程序屏幕截图
使用 compose 的应用程序屏幕截图
编写代码
val modalBottomSheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
)
val coroutineScope = rememberCoroutineScope()
ModalBottomSheetLayout(
sheetState = modalBottomSheetState,
sheetContent = {
// Not relevant
},
) {
Scaffold(
scaffoldState = scaffoldState,
topBar = {
// Not relevant
},
floatingActionButton = {
FloatingActionButton(
onClick = {
coroutineScope.launch {
if (!modalBottomSheetState.isAnimationRunning) {
if (modalBottomSheetState.isVisible) {
modalBottomSheetState.hide()
} else {
modalBottomSheetState.show()
}
}
}
},
) {
Icon(
imageVector = Icons.Rounded.Add,
contentDescription = "Add",
)
}
},
modifier = Modifier
.fillMaxSize(),
) { innerPadding ->
// Not relevant - Nav graph code
}
}
尝试使用accompanist库中的System UI Controller来控制statusBar Color和navigationBar color
implementation "com.google.accompanist:accompanist-systemuicontroller:0.18.0"
// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight
SideEffect {
// Update all of the system bar colors to be transparent, and use
// dark icons if we're in light theme
systemUiController.setSystemBarsColor(
color = Color.Transparent,
darkIcons = useDarkIcons
)
// setStatusBarsColor() and setNavigationBarsColor() also exist
}
可以去除自动昆虫并使状态栏透明:
WindowCompat.setDecorFitsSystemWindows(window, false)
window.statusBarColor = android.graphics.Color.TRANSPARENT;
然后绘制底部表格,它将位于所有系统栏(包括状态栏)下方
只是不要忘记在需要时为其余视图添加昆虫,它现在处于撰写基础中:
modifier = Modifier
.navigationBarsPadding()
.captionBarPadding()
.imePadding()
.statusBarsPadding(),
ModalBottomSheet(
modifier = Modifier
.imePadding()
.fillMaxWidth()
.fillMaxHeight(0.95f),
sheetState = sheetState,
containerColor = MaterialTheme.colorScheme.background,
scrimColor = Color(0x8A000000),
dragHandle = {},
windowInsets = WindowInsets(0,0,0,0),
onDismissRequest = {
scope.launch {
sheetState.hide()
}
},
) {
}
使用 androidx.compose.material3.ModalBottomSheet 并设置 windowInsets = WindowInsets(0,0,0,0)
在最新版本的 Compose 中,默认情况下在
statusBarColor
文件中设置一个 Theme.kt
参数。如果您不使用伴奏,请尝试更改该值以获得所需的效果。
如果您使用的是 Material3,您可以直接向 ModalBottomSheet 提供
windowInsets
。您可以将它们设置为 0 或保留您喜欢的。
例如,如果您只想维护底部插图,请使用以下代码:
ModalBottomSheet(
sheetState = sheetState,
onDismissRequest = { },
modifier = modifier,
windowInsets = BottomSheetDefaults.windowInsets.only(WindowInsetsSides.Bottom),
) {
// Bottom sheet layout
}