如何结合animated_bottom_navigation_bar与可展开FAB实现带缺口导航栏

核心问题分析 #

通常出现异常的原因集中在这几点：

• 可展开FAB的弹出层被底部导航栏遮挡
• FAB初始位置没对准导航栏缺口
• 两个组件的布局约束互相冲突

具体实现步骤 #

1. 调整布局层级，确保FAB弹出层在最上层 #

用Stack组件包裹导航栏和FAB，把FAB放在导航栏之后，保证弹出层能覆盖导航栏：

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    // 页面主体内容
    Scaffold(
      body: _pages[currentIndex],
      // 这里不要设置floatingActionButton，避免布局冲突
    ),
    // 带缺口的底部导航栏
    AnimatedBottomNavigationBar(
      icons: _icons,
      activeIndex: currentIndex,
      onTap: (index) => setState(() => currentIndex = index),
      notchSmoothness: NotchSmoothness.defaultEdge,
      // 保留默认缺口设置，为FAB预留位置
    ),
    // 可展开FAB，放在Stack最上层
    ExpandableFab(
      // 调整偏移量，对准导航栏缺口
      offset: const Offset(0, -30), // 根据导航栏实际高度微调数值
      children: [
        FloatingActionButton.small(
          child: const Icon(Icons.add),
          onPressed: () {},
        ),
        FloatingActionButton.small(
          child: const Icon(Icons.edit),
          onPressed: () {},
        ),
      ],
      onPressed: () {},
    ),
  ],
)

2. 配置FAB弹出方向适配导航栏 #

设置ExpandableFab的弹出方向为向上，避免弹出层和导航栏重叠：

ExpandableFab(
  expansionDirection: ExpansionDirection.up,
  // 其他配置项...
)

3. 微调导航栏缺口参数 #

如果导航栏缺口和FAB大小不匹配，可通过animated_bottom_navigation_bar的notchMargin参数调整间距：

AnimatedBottomNavigationBar(
  notchMargin: 8.0, // 按需调整缺口与FAB的间距
  // 其他配置项...
)

4. 状态同步处理（可选） #

如果需要点击导航栏时自动收起FAB，可借助控制器实现：

final ExpandableFabController _fabController = ExpandableFabController();

// 在导航栏的点击回调中添加收起逻辑
AnimatedBottomNavigationBar(
  onTap: (index) {
    setState(() => currentIndex = index);
    _fabController.toggle(animate: false); // 收起FAB
  },
  // 其他配置项...
)

// 给ExpandableFab绑定控制器
ExpandableFab(
  controller: _fabController,
  // 其他配置项...
)

常见问题排查 #

• FAB被导航栏遮挡：检查Stack子组件顺序，确保FAB在导航栏之后
• 弹出层位置异常：调整offset参数和expansionDirection
• FAB点击无响应：确认没有其他组件覆盖在FAB上层

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