使用Material 3减少NavigationBar中的填充

Question

我正在使用新材料3 NavigationBar和NavigationBarItem组件，我希望NavigationBar更薄，因为默认的太大了。我想要一个类似于Gmail或Drive的(请参阅末尾的图片进行比较)。缩小图标不起作用，也不能更改所有可用的填充(图标、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()