在FlutterMap上层Stack中使用ListView导致地图无法交互的问题

问题场景 #

想要在FlutterMap组件上方的Stack中添加一个底部横向滚动的ListView，但遇到以下问题：

• 直接使用ListView时，因子项高度未知，ListView会占满全屏，导致地图无法交互
• 开启shrinkWrap: true并通过Align居中布局后，仅地图两侧能响应手势，中间区域被ListView遮挡

原代码：

@override
Widget build(BuildContext context) {
  return Stack(children: [
    FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        center: currentLatLng,
        zoom: _defaultZoomLevel,
      ),
      children: [
        TileLayer(
          minZoom: 2,
          maxZoom: 18,
          backgroundColor: Colors.black,
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: const ['a', 'b', 'c'],
        ),
      ],
    ),
    Positioned.fill(
        child: Align(
            alignment: Alignment.bottomCenter,
            child: ListView(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemExtent: 70.0,
                children: [
                  const Chip(label: Text('data')),
                  const Chip(label: Text('data')),
                  const Chip(label: Text('data')),
                ])))
  ]);
}

问题原因 #

核心问题在于Positioned.fill会让子组件（Align）占满整个Stack空间，即使Align仅将ListView定位在底部，Align自身的手势响应区域仍覆盖全屏。ListView虽通过shrinkWrap适配了内容宽度，但父容器Align的全屏范围会拦截手势事件，导致地图无法正常交互。

解决方案 #

1. 移除Positioned.fill，直接将Align作为Stack的子组件，Align默认仅占用子组件所需空间
2. 用SizedBox给ListView指定固定高度，确保ListView仅占据底部有限区域，不干扰地图其他区域的手势交互

修复后代码：

@override
Widget build(BuildContext context) {
  return Stack(fit: StackFit.expand, children: [
    FlutterMap(
      mapController: _mapController,
      options: MapOptions(
        center: currentLatLng,
        zoom: _defaultZoomLevel,
      ),
      children: [
        TileLayer(
          minZoom: 2,
          maxZoom: 18,
          backgroundColor: Colors.black,
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: const ['a', 'b', 'c'],
        ),
      ],
    ),
    Align(
        alignment: Alignment.bottomCenter,
        child: SizedBox(
          height: 50.0,
          child: ListView(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemExtent: 70.0,
              children: [
                const Chip(label: Text('data')),
                const Chip(label: Text('data')),
                const Chip(label: Text('data')),
              ]),
        ))
  ]);
}

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