[英]Modal Bottom Sheet scrim color is not shown in status bar in Jetpack compose
Migrating an app in view system to Jetpack compose.将视图系统中的应用程序迁移到 Jetpack Compose。
The bottom sheet scrim color is shown on the status bar in the current app.底部床单稀松布颜色显示在当前应用程序的状态栏上。
How to reproduce the same in Jetpack compose?如何在 Jetpack Compose 中重现相同内容?
Screenshot of the app using views使用视图的应用程序屏幕截图
Screenshot of the app using compose使用 compose 的应用程序屏幕截图
Compose Code编写代码
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
}
}
try to use the System UI Controller in the accompanist library to control the statusBar Color and navigationBar color尝试使用伴奏库中的System UI Controller来控制 statusBar Color 和 navigationBar 颜色
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
}
In the latest versions of Compose, there's a statusBarColor
parameter that is set in the Theme.kt
file by default.在最新版本的 Compose 中,默认情况下在
Theme.kt
文件中设置了一个statusBarColor
参数。 If you're not using accompanist, try altering that value to get the desired effect.如果您不使用伴奏,请尝试更改该值以获得所需的效果。
You can remove automatic insects and make status bar transparent:您可以删除自动昆虫并使状态栏透明:
WindowCompat.setDecorFitsSystemWindows(window, false)
window.statusBarColor = android.graphics.Color.TRANSPARENT;
Then draw your bottom sheet and it will go under all system bars including status bar然后绘制你的底片,它会在所有系统栏包括状态栏下显示 go
Just don't forget to add insects for the rest of the views when needed, it's in compose foundation now:只是不要忘记在需要时为视图的 rest 添加昆虫,它现在在 compose foundation 中:
modifier = Modifier
.navigationBarsPadding()
.captionBarPadding()
.imePadding()
.statusBarsPadding(),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.