Flutter：如何实现BottomNavigationBar中的扩展悬浮弹窗

核心思路 #

通过Stack布局将底部导航栏与悬浮弹窗叠加，用状态变量控制弹窗的显示/隐藏，点击指定导航按钮触发弹窗，同时支持点击外部区域关闭弹窗，可添加动画提升交互体验。

1. 状态管理与基础框架 #

创建StatefulWidget维护导航选中状态和弹窗显示状态，点击导航栏指定按钮时切换弹窗状态：

class BottomNavPopupPage extends StatefulWidget {
  const BottomNavPopupPage({super.key});

  @override
  State<BottomNavPopupPage> createState() => _BottomNavPopupPageState();
}

class _BottomNavPopupPageState extends State<BottomNavPopupPage> {
  int _selectedIndex = 0;
  bool _isPopupVisible = false;

  void _onItemTapped(int index) {
    // 点击索引为2的按钮触发弹窗切换
    if (index == 2) {
      setState(() => _isPopupVisible = !_isPopupVisible);
    } else {
      setState(() {
        _selectedIndex = index;
        _isPopupVisible = false; // 切换其他导航项时自动关闭弹窗
      });
    }
  }

2. 自定义悬浮弹窗组件 #

实现带阴影、圆角的弹窗，通过Positioned定位在底部导航栏上方，内部可自定义菜单选项：

Widget _buildPopupMenu() {
  return Positioned(
    bottom: kBottomNavigationBarHeight + 16, // 与导航栏保持间距
    left: MediaQuery.of(context).size.width * 0.2,
    right: MediaQuery.of(context).size.width * 0.2,
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            blurRadius: 10,
            offset: const Offset(0, -2),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(vertical: 12),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          _popupMenuItem(Icons.add, "新建项目"),
          _popupMenuItem(Icons.upload, "上传文件"),
          _popupMenuItem(Icons.share, "分享内容"),
        ],
      ),
    ),
  );
}

// 单个菜单选项组件
Widget _popupMenuItem(IconData icon, String text) {
  return InkWell(
    onTap: () {
      setState(() => _isPopupVisible = false);
      // 这里添加对应菜单的业务逻辑
    },
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
      child: Row(
        children: [
          Icon(icon, color: Colors.blueAccent),
          const SizedBox(width: 12),
          Text(text, style: const TextStyle(fontSize: 16)),
        ],
      ),
    ),
  );
}

3. 整合主布局 #

用Stack包裹页面主体和弹窗，根据状态控制弹窗显示，同时添加透明遮罩实现点击外部关闭：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        // 页面主体内容，根据导航选中项切换
        IndexedStack(
          index: _selectedIndex,
          children: const [
            Center(child: Text("首页")),
            Center(child: Text("消息")),
            Center(child: Text("中心")),
            Center(child: Text("我的")),
          ],
        ),
        // 点击外部关闭弹窗的透明遮罩
        if (_isPopupVisible)
          GestureDetector(
            onTap: () => setState(() => _isPopupVisible = false),
            child: Container(color: Colors.transparent),
          ),
        // 悬浮弹窗
        if (_isPopupVisible) _buildPopupMenu(),
      ],
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
        BottomNavigationBarItem(icon: Icon(Icons.message), label: '消息'),
        BottomNavigationBarItem(icon: Icon(Icons.add_circle), label: '添加'),
        BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.blueAccent,
      onTap: _onItemTapped,
    ),
  );
}

4. 优化交互（可选） #

添加动画过渡效果，让弹窗显示/隐藏更流畅：
将Positioned替换为AnimatedPositioned，设置动画时长：

AnimatedPositioned(
  duration: const Duration(milliseconds: 200),
  bottom: _isPopupVisible ? kBottomNavigationBarHeight + 16 : -200,
  left: MediaQuery.of(context).size.width * 0.2,
  right: MediaQuery.of(context).size.width * 0.2,
  child: Container(
    // 弹窗样式和内容不变
    ...
  ),
)

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