撰写底部导航填充

Question

我正在尝试在 BottomNavigation 可组合项上正确应用底部窗口插图。我有一个边到边的脚手架，它看起来像这样：

使用时：

modifier.navigationBarsPadding()

在底部导航中，我收到以下信息：

我正在努力实现以下目标：

         Scaffold(
            modifier = Modifier
                .background(brush = NanitColors.blueGradient),
            topBar = {
                topBar()
            },
            bottomBar = {
                if (shouldShowBottomBar) {
                    BottomNavigationBar(navController)
                }
            },
            scaffoldState = scaffoldState,
            drawerContent = {
                Drawer { route ->
                    scope.launch {
                        scaffoldState.drawerState.close()
                    }
                    navController.navigate(route.route) {
                        popUpTo(navController.graph.startDestinationId)
                        launchSingleTop = true
                    }
                    currentDestination = route
                }
            },
            drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
        ) { innerPadding ->
            NavigationHost(navController = navController, modifier = Modifier.padding(innerPadding))
        }
    
     val topBar: @Composable () -> Unit = {
            MainToolbar(
                modifier = modifier.statusBarsPadding(),
                title = title ?: "",
                onMenuClicked = {
                    scope.launch {
                        scaffoldState.drawerState.open()
                    }
                }
            )
        }

 BottomNavigation(
        modifier = modifier.navigationBarsPadding()
    ) {
        items.forEach { item ->
            BottomNavigationBarItem(
                item = item,
                isSelected = selectedItem?.route == item.route,
                onSelectedChange = { onSelectedItemChange(item) }
            )
        }
    }

Answer 1

您可以使用 accompanist systemuicontroller 设置导航栏的颜色，为其他屏幕使用默认颜色，并为您需要的屏幕添加颜色：

@Composable
fun AppTheme(
    systemBarColor: Color = MaterialTheme.colors.background,
    content: @Composable () -> Unit,
) {
   ...

    SideEffect {
        systemUiController.setNavigationBarColor(
            color = systemBarColor,
            darkIcons = useDarkIcons
        )
    }
}

Answer 2

如果您使用的是 Material3，则可以使用 BottomAppBar()。该组件支持 WindowInsets。所以它会自动尊重系统导航栏并绘制其后面的背景。

Scaffold(
    ...
    bottomBar = {
        if (shouldShowBottomBar) {
            BottomAppBar(
                // you could of course also use WindowInsets.navigationBars
                windowInsets = WindowInsets.safeDrawing
            ) {
            }
        }
    },
    ...
)