在列表视图中滚动地图时如何避免滚动列表视图 [英] How to avoid scrolling listview when scrolling in map within listview

问题描述

我有一个ListView，在它的顶部有一个地图，我希望在滚动ListView时地图从视图中滚动出来，但我也希望用户能够与地图进行交互.因此，仅当用户在其他ListView小部件上滚动时才应进行滚动，而不是在用户在地图上滚动时进行滚动，那么我希望将手势直接应用于地图. 不过目前，当用户在地图上滚动时，它会滚动整个ListView.

I have a ListView, at the top of which I have a map, I want the map to scroll out of view when the ListView is scrolled, but I also want the user to be able to interact with the map. So scrolling should only happen when the user scrolls on the other ListView widgets and not when they scroll on the map, then I want the gesture to be applied directly to the map. Currently though, when the user scrolls on the map, it scrolls the whole ListView.

我尝试了另一个我在这里遇到的建议 在Flutter中，如何子小部件可以阻止其可滚动父级滚动吗? 我在上面的示例中将地图容器包装在下面的示例中的答案中添加了GestureDetector，但这只是在滚动地图时阻止了ListView和Map的滚动.视频链接 https://imgur.com/SeCRzUC

I have tried the other suggestion that I have come across on here In Flutter, how can a child widget prevent the scrolling of its scrollable parent? I added a GestureDetector as suggested in the answer to the post above wrapping the map container in the sample below, however this just blocked scrolling of both the ListView and the Map when scrolling on the map. Video link https://imgur.com/SeCRzUC

这是我的build方法返回的小部件.此代码取决于google_maps_flutter插件.

Here is the widget that is returned by my build method. This code depends on the google_maps_flutter plugin.

Container(
  height: MediaQuery.of(context).size.height,
  child:
  ListView.builder(
    itemCount: 12 + 1,
    itemBuilder: (context, index) {
      if (index == 0) return GestureDetector(
        onVerticalDragUpdate: (_){},
        child: Container(
          height: MediaQuery.of(context).size.height / 2,
          child: GoogleMap(initialCameraPosition: initalPosition),
        ),
      );
      else return ListTile(title: Text("$index"),);
    }
  )
),

我曾希望地图能够捕获手势，但不能捕获手势，包含它的listview能够捕获所有手势.谁能建议我如何强制将列表中此项目的所有手势直接传递到地图，并在滚动列表中的其他项目时仍然使列表滚动?

I had hoped the map would capture gestures but it doesn't, the listview which contains it captures all. Could anyone suggest how I could force all gestures for this item in the list to be passed directly to the map, and still have the list scroll when other items in the list are scrolled?

推荐答案

campovski 下面的答案是更新的答案.

campovski 's answer down below is the updated answer.

Depreciated Answer:

• 如果要在滚动时从屏幕上移出GoogleMap小部件，请用ListView包裹所有内容.

• Wrap everything with ListView if you want to move out GoogleMap widget from the screen when scrolling.

使用GoogleMap手势识别器覆盖ListView滚动实体.

Override ListView scrolling phyics with GoogleMap gestureRecognizers.

由于ListView物理之间的冲突，禁用ListView.builder滚动物理.

Disable ListView.builder scrolling physics due to conflict between ListView physics.

首先导入依赖项:

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';

构建方法:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          SizedBox(
            height: MediaQuery.of(context).size.height / 2,
            child: GoogleMap(
              initialCameraPosition:
                  CameraPosition(target: LatLng(41, 29), zoom: 10),
              gestureRecognizers: Set()
                ..add(
                    Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
                ..add(
                  Factory<VerticalDragGestureRecognizer>(
                      () => VerticalDragGestureRecognizer()),
                )
                ..add(
                  Factory<HorizontalDragGestureRecognizer>(
                      () => HorizontalDragGestureRecognizer()),
                )
                ..add(
                  Factory<ScaleGestureRecognizer>(
                      () => ScaleGestureRecognizer()),
                ),
            ),
          ),
          ListView.builder(
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: 12,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text("$index"),
              );
            },
          )
        ],
      ),
    );
  }

这篇关于在列表视图中滚动地图时如何避免滚动列表视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！