android - 在 Flutter 中使用 Map 的 PageController

Question

我已经在我的 FLutter 应用程序中实现了一个 PageController，它工作正常。所以我可以滑动和改变屏幕/页面。我在我的应用程序中添加了一个谷歌地图，我无法在 map 内向左/向右滚动。当我试图向左滚动时.. 应用程序正在更改屏幕。如何使用 PageController 在 Google Map 上通过 ontap 在应用程序内滚动。谢谢。

这是我的 BubbleBottomNav 类(class)。

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
import 'package:bubbled_navigation_bar/bubbled_navigation_bar.dart';
import 'package:tasky/Map/mapClass.dart';




class BubbleBottomNav extends StatefulWidget {



  final titles = ['Home',  'Map', 'Page1', 'Page2', 'Page3'];
  final colors =[Colors.red,Colors.purple,Colors.teal,Colors.green,Colors.cyan];
  final icons = [
    CupertinoIcons.home,
    CupertinoIcons.location,
    CupertinoIcons.padlock,
    Icons.assignment,
    CupertinoIcons.profile_circled
  ];



  @override
  _BubbleBottomNavState createState() => _BubbleBottomNavState();
}

class _BubbleBottomNavState extends State<BubbleBottomNav> {



  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  PageController _pageController;
  MenuPositionController _menuPositionController;
  bool userPageDragging = false;



  @override
  void initState() {
    _menuPositionController = MenuPositionController(initPosition: 0);

    _pageController = PageController(
      initialPage: 0,
      keepPage: false,
      viewportFraction: 1.0
    );
    _pageController.addListener(handlePageChange);




    super.initState();
  }

  void handlePageChange() {
    _menuPositionController.absolutePosition = _pageController.page;
  }

  void checkUserDragging(ScrollNotification scrollNotification) {
    if (scrollNotification is UserScrollNotification && scrollNotification.direction != ScrollDirection.idle) {
      userPageDragging = true;
    } else if (scrollNotification is ScrollEndNotification) {
      userPageDragging = false;
    }
    if (userPageDragging) {
      _menuPositionController.findNearestTarget(_pageController.page);
    }
  }

  @override
  Widget build(BuildContext context) {


    return Scaffold(
        bottomNavigationBar: BubbledNavigationBar(


        controller: _menuPositionController,
        initialIndex: 0,
        itemMargin: EdgeInsets.symmetric(horizontal: 8),
        backgroundColor: Colors.white,
        defaultBubbleColor: Colors.blue,
        onTap: (index) {
          _pageController.animateToPage(
            index,
            curve: Curves.easeInOutQuad,
            duration: Duration(milliseconds: 500)
          );
        },

        items: widget.titles.map((title) {
          var index = widget.titles.indexOf(title);
          var color = widget.colors[index];
          return BubbledNavigationBarItem(
            icon: getIcon(index, color),
            activeIcon: getIcon(index, Colors.white),
            bubbleColor: color,
            title: Text(
              title,
              style: TextStyle(color: Colors.white, fontSize: 12),
            ),
          );
        }).toList(),
      ),

      body: NotificationListener<ScrollNotification>(
        onNotification: (scrollNotification) {
          checkUserDragging(scrollNotification);
        },
        child: PageView(
          controller: _pageController,
          children:[
         Container(color: Colors.cyan),
            Mapclass(),
        Container(color: Colors.redAccent),
          Container(color: Colors.lightGreenAccent),
        Container(color: Colors.blueGrey),
          ],
          //widget.pages.toList(),
          onPageChanged: (page) {
          },
        ),
      ),

    );



  }

  Padding getIcon(int index, Color color) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 3),
      child: Icon(widget.icons[index], size: 30, color: color),
    );
  }
}

我的谷歌地图类:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'dart:async';

class GoogleMapDemo extends StatefulWidget {



  @override
  _GoogleMapDemoState createState() => _GoogleMapDemoState();
}

class _GoogleMapDemoState extends State<GoogleMapDemo>
    with SingleTickerProviderStateMixin {
  Completer<GoogleMapController> _controller = Completer();
  final islocationpermission = false;

  static const LatLng _center = const LatLng(21.234685, 72.8832501);
  MapType _currentMapType = MapType.normal;
  final Set<Marker> _markers = {};
  LatLng _lastMapPosition = _center;

  @override
  void initState() {
    super.initState();
  }

  void _onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
  }

  void _onCameraMove(CameraPosition position) {
    _lastMapPosition = position.target;
  }

  void _onAddMarkerButtonPressed() {
    setState(() {
      _markers.add(Marker(
          // This marker id can be anything that uniquely identifies each marker.
          markerId: MarkerId(_lastMapPosition.toString()),
          position: _lastMapPosition,
          infoWindow: InfoWindow(
            title: 'Checkout this Place',
            snippet: 'Rate now',
          ),
          icon: BitmapDescriptor.defaultMarkerWithHue(
              BitmapDescriptor.hueViolet)));
    });
  }


  void showMenuSelection(String value) {
    setState(() {
      switch (value) {
        case 'normal':
          {
            _currentMapType = MapType.normal;
          }
          break;
        case 'hybrid':
          {
            _currentMapType = MapType.hybrid;
          }
          break;
        case 'satellite':
          {
            _currentMapType = MapType.satellite;
          }
          break;
        case 'terrain':
          {
            _currentMapType = MapType.terrain;
          }
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Map Feed"),backgroundColor: Color(0XFF2193b0),
        actions: <Widget>[
          PopupMenuButton<String>(
            onSelected: showMenuSelection,
            tooltip: "Choose MapType",
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                  const PopupMenuItem<String>(
                    value: 'normal',
                    child: Text('Normal'),
                  ),
                  const PopupMenuItem<String>(
                    value: 'hybrid',
                    child: Text('HyBrid'),
                  ),
                  const PopupMenuItem<String>(
                    value: 'satellite',
                    child: Text('Satellite'),
                  ),
                  const PopupMenuItem<String>(
                    value: 'terrain',
                    child: Text('Terrain'),
                  )
                ],
          ),
        ],
      ),
      body: Stack(
        children: <Widget>[
          GoogleMap(
            myLocationEnabled: true,
            mapType: _currentMapType,
            onMapCreated: _onMapCreated,
            scrollGesturesEnabled: true,
            tiltGesturesEnabled: true,
            rotateGesturesEnabled: true,
            compassEnabled: true,
            onCameraMove: _onCameraMove,
            markers: _markers,
            // trackCameraPosition: true,
            zoomGesturesEnabled: true,
            initialCameraPosition: CameraPosition(
              target: _center,
              zoom: 10.0,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Align(
              alignment: Alignment.topRight,
              child: Column(
                children: <Widget>[
                  FloatingActionButton(
                    onPressed: _onAddMarkerButtonPressed,
                    materialTapTargetSize: MaterialTapTargetSize.padded,
                    backgroundColor: Colors.green,
                    child: const Icon(Icons.add_location, size: 36.0),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

要解决此问题，只需将以下代码添加到谷歌地图小部件:

  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
    new Factory<OneSequenceGestureRecognizer>(
          () => new EagerGestureRecognizer(),
    ),
  ].toSet(),