电商图书App中FloatingActionButton（FAB）对齐问题

开发者阿泽

2026-6-25

FloatingActionButton布局定位问题求助

项目背景

我正在开发一款售卖图书的Android电商App，目前遇到FloatingActionButton（FAB）的布局定位难题。

配置与需求

App全局使用持久化的BottomAppBar
希望将FAB定位在屏幕右下角、BottomAppBar上方

遇到的问题

把FAB代码放在HomeScreen.kt文件中，按钮完全不显示
把FAB代码放在BottomAppBar.kt文件中，无法将其正确对齐到右下角

已尝试操作

尝试将代码放入HomeScreen.kt但按钮被隐藏
尝试放入BottomAppBar.kt则对齐异常

相关代码

根Composable代码

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