太简略了,直接来

引证依赖:

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 沉浸式状态栏

设置后尽管运用布局高度能够占满全屏,可是由于状态栏和导航栏的 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 沉浸式状态栏

需求留意 TransparentSystemBars() 办法需求放在 Theme 的 content 中调用,不然状态栏还有导航栏的色彩仍是 Theme colorScheme 中设置的色彩

第三步:处理 WindowInsets

22 三步走实现 Compose 沉浸式状态栏

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 沉浸式状态栏

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 沉浸式状态栏

完成办法这三步就搞定了,详细完成看情况自己设置就好了,需求留意的就是 WindowInsets 的处理。