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

Question

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

我想在不手动添加导航项之间 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
                    }
                }
            )
        }
    }
}

Answer 1

BottomNavigation 是 Row，所有 BottomNavigationItem 都是 Box，RowScope 中带有 .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
                            )
                        }
                    }
                }

            }
        },

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

How to combine FAB with BottomAppBar without overlapping nav items?

android

android-jetpack

material-components-android

android-jetpack-compose