如何在不重叠导航项的情况下将 FAB 与 BottomAppBar 结合起来？答案

【问题标题】：How to combine FAB with BottomAppBar without overlapping nav items?如何在不重叠导航项的情况下将 FAB 与 BottomAppBar 结合起来？
【发布时间】：2021-05-14 06:45:21
【问题描述】：

我在 Jetpack Compose 的应用程序中使用 Material 的 BottomAppBar 作为我的 BottomNav。但是当我试图将我的工厂停靠在BottomAppBar 上时，它会覆盖导航项目，如屏幕截图所示。有没有什么办法可以自动在fab旁边加个空间？

我想实现这个效果，不需要在导航项之间手动添加Space，如下图所示：

下面是我的代码：

@Composable
fun TestApp() {
    val navController = rememberNavController()

    Scaffold(
        bottomBar = {
            MyBottomAppBar(navController = navController)
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { }) {
                Icon(imageVector = Icons.Rounded.Add, contentDescription = "fab")
            }
        },
        floatingActionButtonPosition = FabPosition.Center,
        isFloatingActionButtonDocked = true,
    ) {
        NavHost(navController, startDestination = Screen.Bill.route) {
            composable(Screen.Bill.route) { BillScreen() }
            composable(Screen.Chart.route) { ChartScreen() }
            composable(Screen.Budget.route) { BudgetScreen() }
            composable(Screen.Account.route) { AccountScreen() }
        }
    }
}

@Composable
fun MyBottomAppBar(navController: NavController) {
    BottomAppBar(
        cutoutShape = CircleShape
    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.arguments?.getString(KEY_ROUTE)

        Screen.items.forEachIndexed { index, screen ->
            BottomNavigationItem(               
                selected = (currentRoute == screen.route),
                icon = { Icon(screen.iconRes, screen.route) },
                label = { Text(stringResource(id = screen.labelRes)) },
                onClick = {
                    navController.navigate(screen.route) {
                        popUpTo = navController.graph.startDestination
                        launchSingleTop = true
                    }
                }
            )
        }
    }
}

【问题讨论】：

标签： android android-jetpack material-components-android android-jetpack-compose

【解决方案1】：

BottomNavigation 是Row，所有BottomNavigationItem 都是Box，在.weight(1f) 中带有.weight(1f) 修饰符。

您可以在Row 或BottomNavigation 中间添加一个与BottomNavigationItem 大小相同的“空”元素。

例如：

bottomBar = {
            BottomAppBar(cutoutShape = fabShape) {
                BottomNavigation {
                    items.forEachIndexed { index, item ->
                        if (index != 2){ // 
                        BottomNavigationItem(
                            // your implementation
                        )} else {
                            //Empty BottomNavigationItem
                            BottomNavigationItem(
                                icon = {},
                                label = {  },
                                selected = false,
                                onClick = {  },
                                enabled = false
                            )
                        }
                    }
                }

            }
        },

【讨论】：