PageView 中的 GoogleMap

Posted 2023-02-23

【中文标题】PageView 中的 GoogleMap

【英文标题】：GoogleMap in PageView

【发布时间】：2019-09-06 21:03:03

【问题描述】：

我有一个 googlemap 位于页面视图中的容器上...当您在包含这些 googlemap 小部件的页面之间滑动时，页面捕捉中断...所以当我这样做时在我的代码中

class Homepage extends StatelessWidget 
  @override build(BuildContext context)
    return PageView(
      children: <Widget>[
        Container(color:Colors.red),
        Container(color:Colors.green),
        Container(color:Colors.blue),
        Container(color:Colors.yellow),
        Container(color:Colors.pink),
        // Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        // Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        // Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        // Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),))
      ],
    );
  

这个，它工作正常，所有页面都完美贴合。但是当我像这样取消注释 GoogleMap 小部件时：

class Homepage extends StatelessWidget 
  @override build(BuildContext context)
    return PageView(
      children: <Widget>[
        // Container(color:Colors.red),
        // Container(color:Colors.green),
        // Container(color:Colors.blue),
        // Container(color:Colors.yellow),
        // Container(color:Colors.pink),
        Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)),
        Container(child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),))
      ],
    );
  

PageView 可以工作一段时间，但会中断（在 ios 上），并且此错误（有时）会显示在控制台中：

[VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: 'package:flutter/src/gestures/converter.dart': Failed assertion: line 155 pos 18: '!state.down': is not true.
#0      _AssertionError._doThrowNew (dart:core/runtime/liberrors_patch.dart:40:39)
#1      _AssertionError._throwNew (dart:core/runtime/liberrors_patch.dart:36:5)
#2      PointerEventConverter.expand (package:flutter/src/gestures/converter.dart:155:18)
#3      _SyncIterator.moveNext (dart:core/runtime/libcore_patch.dart:152:12)
#4      ListQueue.addAll (dart:collection/queue.dart:715:25)
#5      _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:83:27)
#6      _rootRunUnary (dart:async/zone.dart:1136:13)
#7      _CustomZone.runUnary (dart:async/zone.dart:1029:19)
#8      _CustomZone.runUnaryGuarded (dart:async/zone.dart:931:7)
#9      _invoke1 (dart:ui/hooks.dart:223:10)
#10     _dispatchPointerDataPacket (dart:ui/hooks.dart:144:5

有人看到并解决了这个问题吗？

感谢您的关注..

约翰。

【问题讨论】：

你解决了吗？我有兴趣。

这很奇怪，我无法在我的颤振版本中复制这个错误。

您必须将您的 GoogleMap 小部件包装到容器中，然后将该容器添加到页面视图容器中。父容器用于您的手势检测。

【参考方案1】：

我在综合浏览量中使用谷歌地图时遇到了类似的问题，但在网上搜索后，我得到了一个终于奏效的解决方案

我所做的只是将谷歌地图放入一个有状态的小部件中，使用with AutomaticKeepAliveClientMixin 和 @override bool get wantKeepAlive => true; 并调用所需的小部件 这是包含谷歌地图的有状态小部件

class GoogleMapWidget extends StatefulWidget
  const GoogleMapWidget(Key? key) : super(key: key);

  @override
  _GoogleMapWidgetState createState() => _GoogleMapWidgetState();


class _GoogleMapWidgetState extends State<GoogleMapWidget> with AutomaticKeepAliveClientMixin 
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) 
    return Container(
        child:GoogleMap(initialCameraPosition: CameraPosition(target:LatLng(0, 0)),)
    );
  

然后你可以像这样从你的主页调用它

class Homepage extends StatelessWidget 
  @override 
  build(BuildContext context)
      return PageView(
          children: <Widget>[
              GoogleMapWidget(),
              GoogleMapWidget(),

          ],
      );
   

我希望这是您正在寻找的答案