太简略了,直接来
引证依赖:
implementation "androidx.compose.ui:ui:1.2.0"
implementation 'androidx.compose.material3:material3:1.1.0-rc01'
implementation "com.google.accompanist:accompanist-systemuicontroller:0.31.0-alpha"
第一步:让运用布局占满全屏
一行代码搞定
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
}
![22 三步走实现 Compose 沉浸式状态栏 22 三步走实现 Compose 沉浸式状态栏](https://www.6hu.cc/storage/2023/05/1683667979-2a40791535793d5.png)
设置后尽管运用布局高度能够占满全屏,可是由于状态栏和导航栏的 Window 级别高于运用的 Window 级别,所以运用布局依然会被遮挡
第二步:设置状态栏和导航栏布景色彩通明
两种办法,一种是 xml Theme 设置,一种是代码设置。我们这儿只用代码来设置。
引入 accompanist-systemuicontroller 库,目前的版本是 0.31.0-alpha
implementation "com.google.accompanist:accompanist-systemuicontroller:0.31.0-alpha"
运用 SystemUiController 供给的 api 来设置状态栏和导航栏通明
@Composable
fun TransparentSystemBars() {
val systemUiController = rememberSystemUiController()
val useDarkIcons = !isSystemInDarkTheme()
SideEffect {
systemUiController.setSystemBarsColor(
color = Color.Transparent,
darkIcons = useDarkIcons,
isNavigationBarContrastEnforced = false,
}
}
也能够运用 systemUiController.setStatusBarColor() 或 systemUiController.setNavigationBarColor() 独自设置
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
WindowInsetsDemoTheme {
// A surface container using the 'background' color from the theme
TransparentSystemBars()
Box(modifier = Modifier.fillMaxSize().background(Color.Magenta),
) {
LazyColumn(
verticalArrangement = Arrangement.spacedBy(22.dp)
) {
items(20) {
Text(text = "第 $it 项")
}
}
}
}
}
}
![22 三步走实现 Compose 沉浸式状态栏 22 三步走实现 Compose 沉浸式状态栏](https://www.6hu.cc/storage/2023/05/1683667986-2e1f01dcf34dc60.png)
需求留意 TransparentSystemBars() 办法需求放在 Theme 的 content 中调用,不然状态栏还有导航栏的色彩仍是 Theme colorScheme 中设置的色彩
第三步:处理 WindowInsets
![22 三步走实现 Compose 沉浸式状态栏 22 三步走实现 Compose 沉浸式状态栏](https://www.6hu.cc/storage/2023/05/1683667991-c82711f2e03e763.gif)
Compose 1.2.0 之后现已将 Accompanist-Insets 增加到 androidx.compose.foundation 中了,所以能够在 Compose 中直接运用 。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
WindowInsetsDemoTheme {
TransparentSystemBars()
Box(
modifier = Modifier.fillMaxSize().background(Color.Magenta)
.systemBarsPadding() //同时增加状态栏和导航栏高度对应的上下 padding
// .statusBarsPadding() //只增加状态栏
// .navigationBarsPadding()//只增加导航啦
) {
LazyColumn(
verticalArrangement = Arrangement.spacedBy(22.dp)
) {
items(20) {
Text(text = "第 $it 项")
}
}
}
}
}
}
![22 三步走实现 Compose 沉浸式状态栏 22 三步走实现 Compose 沉浸式状态栏](https://www.6hu.cc/storage/2023/05/1683667998-cb0112a2d286d51.png)
Compose M3 1.1.0 后 Scaffold、AppTopBar 、AppBottom 默许增加了 WindowInsets 支撑,运用时不需求再特别处理 WindowInsets。
@Composable
fun Scaffold(
modifier: Modifier = Modifier,
topBar: @Composable () -> Unit = {},
bottomBar: @Composable () -> Unit = {},
snackbarHost: @Composable () -> Unit = {},
floatingActionButton: @Composable () -> Unit = {},
floatingActionButtonPosition: FabPosition = FabPosition.End,
containerColor: Color = MaterialTheme.colorScheme.background,
contentColor: Color = contentColorFor(containerColor),
//这儿
contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
content: @Composable (PaddingValues) -> Unit
)
最简略的沉浸式状态栏
Scaffold(
topBar = {
CenterAlignedTopAppBar(
colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
containerColor = Color.Blue
),
title = { Text(text = "WindowInsets") }
)
},
bottomBar = {
BottomAppBar(containerColor = Color.Green) {}
}
) { paddingValues ->
//...
}
![22 三步走实现 Compose 沉浸式状态栏 22 三步走实现 Compose 沉浸式状态栏](https://www.6hu.cc/storage/2023/05/1683668003-388e152cbaae6f7.png)
完成办法这三步就搞定了,详细完成看情况自己设置就好了,需求留意的就是 WindowInsets 的处理。