如何移除BottomTabBar的SafeArea，实现导航栏与内容叠加

要让导航栏叠加在内容上方而非独立区块，需要调整两处核心代码：

1. 移除导航栏的SafeArea包裹 #

直接删掉CustomTabBar外层的SafeArea组件，这样导航栏就不会被安全区域限制，能完全贴合底部或覆盖内容：

@override
Widget build(BuildContext context) {
  // 移除外层的SafeArea
  return Container(
    // 可根据需求调整底部边距，比如适配底部安全区域
    margin: EdgeInsets.fromLTRB(24, 0, 24, MediaQuery.of(context).padding.bottom + 4),
    padding: const EdgeInsets.all(1),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(24),
      gradient: LinearGradient(colors: [
        Colors.white.withOpacity(0.5),
        Colors.white.withOpacity(0),
      ]),
    ),
    child: Container(
      // 原有的导航栏容器代码保持不变
      decoration: BoxDecoration(
          color: RiveAppTheme.background2.withOpacity(0.8),
          borderRadius: BorderRadius.circular(24),
          boxShadow: [
            BoxShadow(
              color: RiveAppTheme.background2.withOpacity(0.3),
              blurRadius: 20,
              offset: const Offset(0, 20),
            )
          ]),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: List.generate(_icons.length, (index) {
          TabItem icon = _icons[index];

          return Expanded(
            key: icon.id,
            
            child: CupertinoButton(
              padding: const EdgeInsets.all(12),
              child: AnimatedOpacity(
                opacity: _selectedTab == index ? 1 : 0.5,
                duration: const Duration(milliseconds: 200),
                child: Stack(
                  clipBehavior: Clip.none,
                  alignment: Alignment.center,
                  children: [
                    Positioned(
                      top: -4,
                      child: AnimatedContainer(
                        duration: const Duration(milliseconds: 200),
                        height: 4,
                        width: _selectedTab == index ? 20 : 0,
                        decoration: BoxDecoration(
                          color: RiveAppTheme.accentColor,
                          borderRadius: BorderRadius.circular(2)
                        ),
                      ),
                    ),
                    SizedBox(
                      height: 36,
                      width: 36,
                      child: RiveAnimation.asset(
                        'assets/samples/ui/rive_app/rive/iconss.riv',
                        stateMachines: [icon.stateMachine],
                        artboard: icon.artboard,
                        onInit: (artboard) {
                          _onRiveIconInit(artboard, index);
                        },
                      ),
                    ),
                  ],
                ),
              ),
              onPressed: () {
                onTabPress(index);
              },
            ),
          );
        }),
      ),
    ),
  );
}

2. 改用Stack实现导航栏叠加效果 #

放弃使用Scaffold的bottomNavigationBar属性，改用Stack将导航栏定位在页面内容上方，同时给内容添加底部内边距避免遮挡：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        // 页面主体内容，添加底部padding避免被导航栏挡住
        Padding(
          // 这里的高度可根据你的导航栏实际尺寸调整，kBottomNavigationBarHeight是系统默认导航栏高度
          padding: EdgeInsets.only(bottom: kBottomNavigationBarHeight + 12),
          child: _tabBody,
        ),
        // 将导航栏定位在屏幕底部
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: CustomTabBar(
            onTabChange: (tabIndex) {
              setState(() {
                _tabBody = _screens[tabIndex];
              });
            },
          ),
        ),
      ],
    ),
  );
}

补充说明 #

• 如果你的CategoriesScreen是滚动组件（比如ListView），底部的padding会自动让内容滚动时避开导航栏；如果是固定布局，确保底部元素不会被导航栏覆盖即可。
• 调整margin的bottom值可以控制导航栏与屏幕底部的距离，结合MediaQuery.of(context).padding.bottom能适配不同设备的底部安全区域。

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