Flutter：使用persistentFooterButtons时如何让FloatingActionButton停靠底部栏

在Flutter的Scaffold组件中，persistentFooterButtons默认会布局在body和bottomNavigationBar之间，这会干扰FloatingActionButton的停靠位置，导致它无法贴合BottomAppBar的凹槽。要实现你想要的效果，不要使用persistentFooterButtons，而是把底部播放栏的内容直接整合到BottomAppBar内部。

修改后的完整代码 #

class Main extends StatefulWidget {
  const Main({Key? key}) : super(key: key);

  @override
  State<Main> createState() => _MainState();
}

class _MainState extends State<Main> {
  int selectedIndex = 0;
  static User user = FirebaseAuth.instance.currentUser!;
  final screens = [
    const Home(),
    const Search(),
    const Library(),
    Account(user: user),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const FittedBox(child: PlayButton()),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      resizeToAvoidBottomInset: false,
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        notchMargin: 5,
        color: Colors.red,
        // 将播放栏和导航栏整合到BottomAppBar的child中
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 原persistentFooterButtons的内容
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: const [
                IconButton(
                  iconSize: 35,
                  icon: Icon(Icons.play_arrow),
                  onPressed: null,
                ),
                Text("Some data over hereSome data "),
                IconButton(
                  icon: Icon(Icons.favorite),
                  onPressed: null,
                )
              ],
            ),
            // 原BottomNavigationBar
            BottomNavigationBar(
              backgroundColor: Colors.transparent,
              type: BottomNavigationBarType.fixed,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(
                    IconlyLight.home,
                    color: Colors.white,
                  ),
                  activeIcon: Icon(
                    IconlyBold.home,
                    color: Colors.white,
                    shadows: [
                      BoxShadow(
                        blurRadius: 30,
                        color: Colors.white,
                      ),
                    ],
                  ),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(
                    IconlyLight.search,
                    color: Colors.white,
                  ),
                  activeIcon: Icon(
                    IconlyBold.search,
                    color: Colors.white,
                    shadows: [
                      BoxShadow(
                        blurRadius: 30,
                        color: Colors.white,
                      ),
                    ],
                  ),
                  label: 'Search',
                ),
                BottomNavigationBarItem(
                  icon: Icon(
                    Iconsax.music_library_2,
                    color: Colors.white,
                  ),
                  activeIcon: Icon(
                    Iconsax.music_library_25,
                    color: Colors.white,
                    shadows: [
                      BoxShadow(
                        blurRadius: 30,
                        color: Colors.white,
                      ),
                    ],
                  ),
                  label: 'Library',
                ),
                BottomNavigationBarItem(
                  icon: Icon(
                    IconlyLight.profile,
                    color: Colors.white,
                  ),
                  activeIcon: Icon(
                    IconlyBold.profile,
                    color: Colors.white,
                    shadows: [
                      BoxShadow(
                        blurRadius: 30,
                        color: Colors.white,
                      ),
                    ],
                  ),
                  label: 'Account',
                ),
              ],
              currentIndex: selectedIndex,
              unselectedItemColor: Colors.white,
              selectedItemColor: Colors.white,
              onTap: (index) => setState(() => selectedIndex = index),
            ),
          ],
        ),
      ),
      body: IndexedStack(
        index: selectedIndex,
        children: screens,
      ),
    );
  }
}

关键修改点 #

• 移除persistentFooterButtons参数：不再依赖该属性展示播放栏，避免干扰FAB位置计算。
• 重构BottomAppBar的child：用Column（设置mainAxisSize: MainAxisSize.min防止占用多余空间）将播放栏和底部导航栏垂直整合，保持底部区域的连贯性。
• 保留FAB原有配置：floatingActionButton和floatingActionButtonLocation的设置不变，确保FAB依然准确停靠在BottomAppBar的圆形凹槽中。

修改后，播放栏与底部导航栏统一在BottomAppBar内，FAB的停靠状态和初始效果一致。

内容的提问来源于stack exchange，提问作者anon