如何将 FAB 与 BottomAppBar 组合而不重叠导航项？

Question

我在 Jetpack Compose 应用程序中使用 Material 的

BottomAppBar

作为我的 BottomNav。但是当我尝试将我的 fab 停靠在

BottomAppBar

上时，它覆盖了导航项，如屏幕截图所示。有什么办法可以在晶圆厂旁边自动添加空间吗？

我想实现这个效果，而不需要手动在导航项之间添加

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

，其中

.weight(1f)

中有

RowScope

修饰符。

您可以在

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
                            )
                        }
                    }
                }

            }
        },

Answer 2

添加空图标并使其不可点击。还可以制作自定义波纹效果。

---