模型导航抽屉不覆盖状态栏。如何解决？

Question

我使用 Jetpack Compose 实现了一个导航抽屉。看起来像这样

但它不像通常的导航抽屉。它没有覆盖状态栏。我想要那个状态栏

这是我的模型导航抽屉代码

@Composable
fun Drawer(scope: CoroutineScope, scaffoldState: ScaffoldState, navController: NavController) {
    val items = listOf(
        NavDrawerItem.Home,
        NavDrawerItem.Music,
        NavDrawerItem.Movies,
        NavDrawerItem.Books,
        NavDrawerItem.Profile,
        NavDrawerItem.Settings
    )
    val item1 = "Logout"
    Column(
        modifier = Modifier
            .background(colorResource(id = R.color.white))
            .fillMaxSize()
    ) {
        Image(
            painter = painterResource(id = R.drawable.logo1),
            contentDescription = R.drawable.logo1.toString(),
            modifier = Modifier
                .height(100.dp)
                .fillMaxWidth()
                .padding(10.dp)
        )
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(5.dp)
        )
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.forEach { item ->
            DrawerItem(item = item, selected = currentRoute == item.route, onItemClick = {
                navController.navigate(item.route) {
                    navController.graph.startDestinationRoute?.let { route ->
                        popUpTo(route) {
                            saveState = true
                        }
                    }
                    launchSingleTop = true
                    
                    restoreState = true
                }
                scope.launch {
                    scaffoldState.drawerState.close()
                }
            })
        }
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(5.dp)
        )
        Logout(scope, scaffoldState)
        Spacer(modifier = Modifier.weight(1f))
        Text(
            text = "Developed by CrazyBot Studio",
            color = Color.Black,
            textAlign = TextAlign.Center,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .padding(12.dp)
                .align(Alignment.CenterHorizontally)
        )
    }
}

这在 Jetpack Compose 上可行吗？如果可以，我该怎么做？

Answer 1

请在您的 Activity 文件中尝试以下代码。

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        makeStatusBarTransparent()
    }

private fun makeStatusBarTransparent() {
        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

    }

希望对你有用！！！

Answer 2

您可以查看 Jetnews code:

在您的 Activity 中，您可以使用类似的东西：

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            YourComposeTheme {
                ProvideWindowInsets {
                    val systemUiController = rememberSystemUiController()
                    val darkIcons = MaterialTheme.colors.isLight
                    SideEffect {
                        systemUiController.setSystemBarsColor(Color.Transparent, darkIcons = darkIcons)
                    }
                    //SimpleScaffoldWithTopBar()
                    //Your Scaffold or Drawer code
                }
            }
        }

模型导航抽屉不覆盖状态栏。如何解决？

Model navigation drawer not covering statusbar. How to fix that?

android

navigation-drawer

android-jetpack-compose