电商图书应用中浮动操作按钮对齐问题

Question

我正在开发一款用于销售书籍的 Android 电子商务应用程序，我面临着 FloatingActionButton (FAB) 放置的挑战。 我的设置：

我在整个应用程序中有一个持久的 BottomAppBar。 我希望 FAB 位于屏幕的右下角，BottomAppBar 的上方。 问题：

如果我将 FAB 代码放在 homeScreen.kt 文件中，它根本不会出现。 如果我将代码放在 BottomAppBar.kt 文件中，我似乎无法将其正确对齐到右下角。 我尝试过的：

我尝试将代码放入 HomeScreen.kt 文件中，但按钮被隐藏。如果我将代码放入 BottomAppBar.kt 文件中，则其未正确对齐。 放置到 BottomAppBar.kt 中的应用程序代码的屏幕截图 放置在 HomeScreen.kt 中的应用程序代码的屏幕截图

我需要什么帮助：

如何使 FAB 可见并与 BottomAppBar 上方的右下角对齐，而不管需要 FAB 的屏幕是什么？

我附上 GitHub 链接 BookNest.In

这是根可组合项：

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

    MainLayout(navController) { paddingValues ->
        NavHost(navController = navController, startDestination = ScreenRoutes.HOME) {
            composable(ScreenRoutes.HOME) { HomeScreen(navController) }
            composable(ScreenRoutes.ACCOUNT) { AccountScreen(navController) }
            composable(ScreenRoutes.NOTIFICATIONS) { NotificationsScreen(navController) }
            composable(ScreenRoutes.MENU) { MenuScreen(navController) }
        }
    }
}

MainLayout 看起来像这样：

@Composable
fun MainLayout(navController: NavHostController, content: @Composable (PaddingValues) -> Unit) {
    Scaffold(
        bottomBar = { MyBottomAppBar(navController) },
        content = content
    )
}

Answer 1

如果您希望无论 NavHost 中显示哪个屏幕都显示 FAB，那么您应该将其添加到

Scaffold

可组合项中的

MainLayout

。

Scaffold

有一个专用插槽，用于放置

FloatingActionButton

:

@Composable
fun MainLayout(navController: NavHostController, content: @Composable (PaddingValues) -> Unit) {
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(
                onClick = { /** navController.navTo(...) **/ },
            ) {
                Icon(Icons.Filled.ShoppingCart, "Cart")
            }
        },
        floatingActionButtonPosition = FabPosition.End,
        bottomBar = { MyBottomAppBar(navController) },
        content = content
    )
}

当 FAB 应该执行相同的操作时，无论您当前在哪个屏幕上，此方法都很有效。如果您希望 FAB 根据屏幕执行不同的操作，您将需要更高级的逻辑。