FloatingActionButton显示在顶部而非底部导航栏：原因及修正方法

FloatingActionButton（FAB）显示在屏幕顶部的核心原因是布局结构使用错误：

• 你将CupertinoTabScaffold作为Scaffold的bottomNavigationBar属性值，但CupertinoTabScaffold本身是独立的页面级组件，会占据整个屏幕的布局空间（包括底部导航栏和页面内容区域）。
• Scaffold的FAB定位逻辑依赖自身的body和常规底部导航组件（如BottomNavigationBar/CupertinoTabBar）计算位置，当bottomNavigationBar被全屏组件占据时，Scaffold无法正确解析布局层级，导致FAB定位失效，最终显示在屏幕顶部。

正确的做法是将CupertinoTabBar直接作为Scaffold的bottomNavigationBar，同时自行管理页面切换逻辑，而非使用CupertinoTabScaffold。修改后的完整代码如下：

class _BTMState extends State<BTM> {
  int currentIndex = 0;

  // 定义需要切换的页面列表
  final List<Widget> _pages = const [
    Categories(),
    FavPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        // 根据当前索引显示对应页面
        body: _pages[currentIndex],
        bottomNavigationBar: CupertinoTabBar(
          backgroundColor: Colors.white,
          activeColor: Colors.blue,
          inactiveColor: const Color.fromARGB(228, 159, 203, 240),
          iconSize: 40,
          height: 70,
          border: const Border(
            top: BorderSide(width: 1, color: Colors.grey),
            bottom: BorderSide(width: 16, color: Colors.blue),
          ),
          currentIndex: currentIndex,
          // 绑定导航栏点击事件
          onTap: onTabTapped,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.favorite),
              label: '',
            ),
          ],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            onTabTapped(0);
          },
          tooltip: "Message",
          elevation: 4.0,
          backgroundColor: Colors.blue,
          child: const Icon(Icons.shopping_cart, color: Colors.white),
        ),
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}

修改关键点说明 #

1. 移除CupertinoTabScaffold：将CupertinoTabBar直接作为Scaffold的bottomNavigationBar，符合Scaffold的布局逻辑，让FAB可以正确基于底部导航栏定位。
2. 页面切换逻辑简化：用页面列表+currentIndex替代CupertinoTabView的页面管理方式，保持功能不变的同时降低布局层级复杂度。
3. 绑定导航栏点击事件：给CupertinoTabBar添加onTap回调，关联原有的onTabTapped方法，实现底部导航的页面切换功能。

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