Flutter实现可收起容器：悬浮于BottomNavigation上方并显示底层地图

核心思路 #

放弃系统自带的Bottom Modal Sheet，改用自定义可动画切换高度的容器，通过层级控制让它悬浮在BottomNavigation上方：展开时覆盖底部导航按钮，收起时仅保留顶部触发条，同时保证下方地图可见。

Flutter 实现示例 #

以Flutter为例，通过Stack+AnimatedContainer实现核心效果：

class MapWithCollapsibleBar extends StatefulWidget {
  @override
  _MapWithCollapsibleBarState createState() => _MapWithCollapsibleBarState();
}

class _MapWithCollapsibleBarState extends State<MapWithCollapsibleBar> {
  bool _isExpanded = false;
  // BottomNavigationBar默认高度为56，展开时容器高度可按需调整
  final double _expandedHeight = 250;
  final double _collapsedHeight = 30;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 最底层：地图组件（示例用Container占位）
          Container(
            color: Colors.lightBlue[100],
            child: const Center(child: Text("地图区域")),
          ),
          // 中间层：底部导航栏
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: BottomNavigationBar(
              items: const [
                BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
                BottomNavigationBarItem(icon: Icon(Icons.map), label: "地图"),
              ],
            ),
          ),
          // 最上层：可折叠容器
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: AnimatedContainer(
              duration: const Duration(milliseconds: 300),
              height: _isExpanded ? _expandedHeight : _collapsedHeight,
              // 收起时背景半透明保证地图可见，展开时用不透明背景提升内容可读性
              color: _isExpanded ? Colors.white : Colors.white.withOpacity(0.8),
              borderRadius: const BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
              ),
              child: Column(
                children: [
                  // 顶部触发条：点击切换展开/收起状态
                  GestureDetector(
                    onTap: () => setState(() => _isExpanded = !_isExpanded),
                    child: Container(
                      height: _collapsedHeight,
                      alignment: Alignment.center,
                      child: Icon(
                        _isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                        color: Colors.grey,
                      ),
                    ),
                  ),
                  // 展开时显示的内容区域
                  if (_isExpanded)
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: ListView(
                          children: const [
                            Text("展开后的内容区域"),
                            SizedBox(height: 10),
                            Text("可放置列表、表单等任意组件"),
                          ],
                        ),
                      ),
                    ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键实现要点 #

• 层级控制：通过Stack将容器放在BottomNavigation上方，确保展开时完全覆盖底部按钮
• 动画过渡：用AnimatedContainer实现高度平滑切换，避免生硬的状态变化
• 视觉适配：收起时设置容器背景半透明，保证下方地图可见；展开时用不透明背景突出内容
• 交互逻辑：顶部触发条绑定点击事件，一键切换展开/收起状态

其他平台适配思路 #

• Android原生：使用CoordinatorLayout自定义BottomSheetBehavior，修改初始状态为“仅显示顶部条”而非完全隐藏；或直接用FrameLayout嵌套底部导航和自定义View，通过属性动画控制View高度
• iOS原生：在ViewController的view上添加自定义UIView，通过CABasicAnimation修改frame的height值，绑定tap手势触发状态切换

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