在 PageView 构建中 Flutter GoogleMap 仅一次答案

【问题标题】：Flutter GoogleMap in a PageView build only ONCE在 PageView 构建中 Flutter GoogleMap 仅一次
【发布时间】：2020-04-28 19:10:08
【问题描述】：

我有一个 PageView.builder 和 3 个 GoogleMap-s。

我只需要在第一次创建 3 个小部件，我不想再次重建它们。现在，当我只是更改它在加载前闪烁一次的页面时，这很烦人。而且很慢。

有什么方法可以在该小部件上构建 FIXED 状态？

我试过了：

AutomaticKeepAliveClientMixin

和

@override bool get wantKeepAlive => true;

但没用。

【问题讨论】：

请分享您的代码以获得任何帮助！
github.com/flutter/flutter/issues/43785 google_maps.dart 中好像有什么东西坏了

标签： google-maps flutter

【解决方案1】：

也许你忘记在 build 方法中调用 super.build(context);。

像这样：

class TestInnerPage extends StatefulWidget {
  @override
  _TestInnerPageState createState() => _TestInnerPageState();
}

class _TestInnerPageState extends State<TestInnerPage>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    /// Dont't forget this
    super.build(context);

    return Container();
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

【讨论】：

方法'build'在超类型中总是抽象的。当我调用super.build(context)时
@AparAmin 当您将 mixin with AutomaticKeepAliveClientMixin 添加到状态类时，您可以调用 super.build(context);

【解决方案2】：

根据接受的答案，这将是一个使用谷歌地图的例子。

class TestInnerPage extends StatefulWidget {
  @override
  _TestInnerPageState createState() => _TestInnerPageState();
}

class _TestInnerPageState extends State<TestInnerPage>
    with AutomaticKeepAliveClientMixin {
  //Variables
  Completer<GoogleMapController> _controller = Completer();

  void onMapCreated(GoogleMapController controller) {
    controller.setMapStyle(Utils.mapStyles);
    _controller.complete(controller);
  }

  @override
  Widget build(BuildContext context) {
    /// Dont't forget this
    super.build(context);

    return GoogleMap(
      myLocationButtonEnabled: false,
      compassEnabled: false,
      myLocationEnabled: false,
      zoomControlsEnabled: false,
      // compassEnabled: true,
      tiltGesturesEnabled: false,
      // markers: _markers,
      // polylines: _polylines,
      mapType: MapType.normal,
      initialCameraPosition: CameraPosition(
        zoom: CAMERA_ZOOM,
        bearing: CAMERA_BEARING,
        tilt: CAMERA_TILT,
        target: LatLng(
            //SOURCE_LOCATION
            7.8731,
            80.7718),
      ),
      onMapCreated: onMapCreated,
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

【讨论】：

【解决方案3】：

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

我所做的只是将谷歌地图放入一个有状态的小部件中，使用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(),

          ],
      );
   }
}

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

【讨论】：