compose之沉浸式(侵入式)状态栏

啊哈,这里实际上没说沉浸式...奈何关键词是这个

compose 版本使用最新的1.2版本

1. 在setContent之前使用
   WindowCompat.setDecorFitsSystemWindows(window,false)
   让内容显示在系统栏的后面,也就是显示在状态栏和导航栏的后面
2. 设置为系统状态栏为透明
   我们导入
   implementation "com.google.accompanist:accompanist-systemuicontroller:$accompanist_version"
   在需要的地方使用systemUiController,设置状态栏为透明色,setStatusBarColor的参数2可以设置状态栏上图标的是否为暗色

val systemUiController = rememberSystemUiController()
LaunchedEffect(key1 = Unit) {
        systemUiController.setStatusBarColor(Color.Transparent)
}

3. 对底部内容侵入系统栏后的重叠部分进行处理
   对于底部导航栏 我们使用Modifier.navigationBarsPadding()

BottomNavigation(
                backgroundColor = MaterialTheme.colors.surface,
                modifier = Modifier.navigationBarsPadding()
            )

对于顶部,我这里是单独抽取的公共部分,所以就使用增加一个状态栏高度的方式来适配

• 获取状态栏高度

val statusBarHeightDp = LocalDensity.current.run {
        WindowInsets.statusBars.getTop(this).toDp()
    }

• 获取状态栏的高度还可以使用

val statusBarHeightDp = with(LocalContext.current){
        var height = 0
        val resourcesId = resources.getIdentifier("status_bar_height", "dimen", "android")
        if(resourcesId>0) {
            height = resources.getDimensionPixelSize(resourcesId)
        }
        with(LocalDensity.current) {
            height.toDp()
        }
    }

• 抽取的topAppBar代码为

@Composable
fun TopAppBar(content: @Composable () -> Unit) {

    val systemUiController = rememberSystemUiController()
    LaunchedEffect(key1 = Unit) {
        systemUiController.setStatusBarColor(Color.Transparent)
    }

    //标题栏高度
    val appBarHeight = 56.dp

    //状态栏高度
    val statusBarHeightDp = LocalDensity.current.run {
        WindowInsets.statusBars.getTop(this).toDp()
    }

    Row(
        modifier = Modifier.background(
            brush = Brush.linearGradient(
                listOf(
                    Blue700,
                    Blue200
                )
            )
        )
            .fillMaxWidth()
            .height(appBarHeight + statusBarHeightDp)
            .padding(top = statusBarHeightDp),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        content()
    }
}

@Preview
@Composable
fun TopAppBarPreview() {
    TopAppBar {
        Text(text = "标题")
    }
}

topAppBar效果为

[email protected]

整体效果为:

[email protected]