使用 Material 3 减少导航栏中的填充

Question

我正在使用新的 Material 3 NavigationBar 和 NavigationBarItem 组件，我希望 NavigationBar 更薄，因为默认的太大了。我想要一个类似于 Gmail 或 Drive 的那个（参见最后的图片进行比较）。使图标变小不起作用，也不会更改所有可用的填充（Icon、NavigationBar 和 NavigationBarItem）。

这是可组合代码，如果我更改 NavigationBar 高度（使用修饰符），则会发生这种情况：

我主要想删除标签和底部之间的空间，以及顶部和图标之间的空间。

@Composable
fun MyAppBottomBar(navController: NavController, tabs: Array<MenuBottom>) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route ?: MenuBottom.INICIO.route
    val rutas = remember { MenuBottom.values().map { it.route } }
    if (currentRoute in rutas) {
        NavigationBar(containerColor = elevation01) {
            tabs.forEachIndexed { index, item ->
                NavigationBarItem(
                    selected = currentRoute == item.route,
                    onClick = {
                        if (item.route != currentRoute) {
                            navController.navigate(item.route) {
                                popUpTo(navController.graph.startDestinationId) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    },
                    label = { Text(stringResource(id = item.title)) },
                    icon = {
                        if (item.route == currentRoute) {
                            Icon(item.selectedIcon, contentDescription = null, tint = Color.Black)
                        } else {
                            Icon(item.unselectedIcon, contentDescription = null)
                        }
                    },
                    colors = NavigationBarItemDefaults.colors(
                        selectedIconColor = Color.Black,
                        unselectedIconColor = Color.Black,
                        indicatorColor = Greenyellow,
                        selectedTextColor = Color.Black,
                        unselectedTextColor = Color.Black
                    )
                )
            }
        }
    }
}

Answer 1

这很可能与底部导航有关。默认情况下，您看到的灰色条有自己的填充。

查看this documentation，了解如何删除这些系统意图。

简而言之，您需要执行以下操作：

implementation "com.google.accompanist:accompanist-insets:<version>"

然后在你的 MainActivity 调用 WindowCompat.setDecorFitsSystemWindows(window, false) 像这样：

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

现在您的应用应该使用整个屏幕，并且您的 NavigationBar 应该与 Gmail 中的导航栏具有相同的高度。

再次应用其中的单个，例如StatusBar 调用修饰符：

Modifier.statusBarsPadding()