在 FlutterMap widget 的 Stack 中使用 ListView - 地图没有显示

Using ListView in Stack on top of FlutterMap widget - Map is not showing

提问人:Hrabosch 提问时间:10/18/2023 最后编辑:Hrabosch 更新时间:10/19/2023 访问量:47

问:

我想在 FlutterMap 小部件之上实现水平可扫描的 ListView 小部件。

当我使用大多数小部件时,它们显示在 Stack 中(在 FlutterMap 之上),但是一旦我使用 ListView,由于子项的高度未知,高度为 100%,并且地图不是交互式的。当我使用并且项目居中时,在侧面映射手柄手势,但它仅水平收缩为内容。shrinkWrap

我尝试使用文本小部件或容器等,它有效。只有在 ListView 中,才会出现地图无法处理手势的问题。我试图将 ListView 包装到 SizedBox,使用 shrinkWrap,但没有运气。 目标是拥有一张地图和底部的水平可滚动图标/框,但现在我需要 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')),
                  ])))
    ]);
  }

我确实相信它一定是渲染器的东西,但我只是无法找出什么。任何帮助将不胜感激!

编辑: 这是固定的解决方案:

@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')),
                ]),
          ))
    ]);
  }
flutter fluttermap

评论

0赞 Mike 10/18/2023
我无法重现您上面所说的错误。也许您应该尝试清理缓存并再次重新运行项目,也许您有版本问题,或者您只是没有显示整个代码。
0赞 Hrabosch 10/19/2023
地图可以首次渲染,但不能与之交互。我发现问题是 ListView 的高度是 100%,并且由于它位于地图顶部,因此无法处理触摸手势。ListView 必须具有 100%,因为渲染无法确定子小部件的高度。编辑的问题
0赞 Mike 10/19/2023
您可以使用 Container() 或 Sizedbox() 限制 Listview 的高度。之后,您应该能够与地图进行交互。
0赞 Hrabosch 10/19/2023
谢谢迈克,有趣的是我正在尝试将其放入大小盒中,但可能还有其他问题。现在我最终拥有了 Stack with,并且该覆盖小部件被包装到 Align->SizedBox -> ListView 中,并且它的行为正常。请随时为此创建您的答案,我会接受的!fit: StackFit.expand

答:

0赞 Mike 10/19/2023 #1

把你包裹起来,试着为你的.ListviewSizedboxListView