JetpackCompose实现沉浸式导航条

基于 compose

安装依赖

implementation "com.google.accompanist:accompanist-insets:0.15.0"
implementation "com.google.accompanist:accompanist-insets-ui:0.15.0"
implementation "com.google.accompanist:accompanist-systemuicontroller:0.15.0"

成果图

MainActivity.kt

首先在 oncreate 方法里面按照注释中的三步依次添加代码

class MainActivity : ComponentActivity() {

    @RequiresApi(Build.VERSION_CODES.R)
    override fun onCreate(savedInstanceState: Bundle?) {

        // 第一步
        WindowCompat.setDecorFitsSystemWindows(window,false)

        super.onCreate(savedInstanceState)
        setContent {
            AidtTheme {

                // 第二步，强制设置状态栏的颜色
                rememberSystemUiController().setStatusBarColor(
                    Blue500,
                    darkIcons = MaterialTheme.colors.isLight
                )

                // 第三步，ProvideWindowInsets嵌套主体
                ProvideWindowInsets {
                    Surface(
                        modifier = Modifier.fillMaxSize(),
                        color = MaterialTheme.colors.background
                    ) {
                        mainBody()
                    }
                }
            }
        }

    }
}

mainBody 主体代码实现

主要方法就是让 scaffold 原理顶部一个状态栏的高度，然后底部导航条也这么做就 OK 了

@Composable
private fun mainBody() {
    ...

    // 第一步：获取顶部状态栏的高度
    val statusBarHeight = with(LocalDensity.current){
        LocalWindowInsets.current.statusBars.top.toDp()
    }

    Scaffold(
        topBar = {
            TopAppBar(

                // 第二步：使用padding让scaffold与顶部隔开一个状态栏的高度
                modifier = Modifier.padding(top = statusBarHeight),

                title = { Text("主页") },
                navigationIcon = {
                    IconButton(onClick = { scope.launch { scaffoldState.drawerState.open() } }) {
                        Icon(Icons.Filled.Menu, null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavigation(
                // 第三步：使底部导航条在底部控制条的上方
                modifier = Modifier.navigationBarsPadding()
            ) {
                items.forEachIndexed { index, item ->
                    BottomNavigationItem(
                        selected = selectedItem == index,
                        onClick = {
                            selectedItem = index
                            navChangePath(item.route)
                        },
                        icon = { Icon(painterResource(item.icon), null) },
                        alwaysShowLabel = false,
                        label = { Text(item.name) }
                    )
                }
            }
        },
    ) {
        ...
    }
}