在FlutterMap小部件顶部的堆栈中使用ListView- Map未显示

k0pti3hp  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(93)

我想实现FlutterMap部件顶部的水平可扩展ListView部件。
当我使用大多数小部件时,它们会显示在FlutterMap的Stack(顶部)中,但一旦我使用ListView,由于子项的高度未知,高度为100%,并且map不是交互式的。当我使用shrinkWrap并且项目居中时,Map句柄在侧面,但它只在水平方向上收缩到内容。
我尝试使用文本部件或容器等,它的工作原理.只有ListView存在Map无法处理手势的问题。我尝试 Package ListView到SizedBox,使用shrinkWrap,没有运气。目标是有一个Map和底部的水平滚动图标/框,但现在我需要任何由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')),
                ]),
          ))
    ]);
  }
jei2mxaa

jei2mxaa1#

Sizedbox Package 你的Listview,并尝试为你的ListView设置一个高度。

相关问题