Flutter 在flatter中重新使用相同的StatefulWidget

我想在Flutter的多个不同页面中重复使用相同的StatefulWidget。在下面的示例中，我希望MyGoogleMap不会为每个页面重建。当我使用TabBar导航到第二个页面时，它使用另一个新版本的MyGoogleMap。我尝试过使用全局键并加载同一个实例，但只加载了几秒钟，就出现了使用同一个键两次的错误

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

const double CAMERA_TILT = 0;
const double CAMERA_BEARING = 0;
const LatLng SOURCE_LOCATION = LatLng(42.747932, -71.167889);
const LatLng DEST_LOCATION = LatLng(37.422, -122.084);

class MyGoogleMap extends StatefulWidget {
  const MyGoogleMap({Key key}) : super(key: key);  // NEW CONSTRUCTOR

  @override
  State<MyGoogleMap> createState() => MyGoogleMapState();
}

class MyGoogleMapState extends State<MyGoogleMap> {

  double CAMERA_ZOOM = 16;
  CameraPosition initialCameraPosition;

  //Map controller
  Completer<GoogleMapController> _controller = Completer();
  GoogleMapController controller;

  //Markers
  Set<Marker> _markers = Set<Marker>();

  Set<Polyline> _polylines = Set<Polyline>();

  // the user's initial location and current location
  LocationData currentLocation;

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

  @override
  Widget build(BuildContext context) {
    initialCameraPosition = CameraPosition(
        zoom: CAMERA_ZOOM,
        tilt: CAMERA_TILT,
        bearing: CAMERA_BEARING,
        target: SOURCE_LOCATION);
    if (currentLocation != null) {
      initialCameraPosition = CameraPosition(
          target: LatLng(currentLocation.latitude, currentLocation.longitude),
          zoom: CAMERA_ZOOM,
          tilt: CAMERA_TILT,
          bearing: CAMERA_BEARING);
    }
    return Container(
      height: 400,
      child: GoogleMap(
          mapToolbarEnabled: false,
          myLocationEnabled: true,
          compassEnabled: true,
          tiltGesturesEnabled: false,
          markers: _markers,
          polylines: _polylines,
          mapType: MapType.normal,
          initialCameraPosition: initialCameraPosition,
          onMapCreated: (GoogleMapController controller) {
            //Change this to change styles
            // controller.setMapStyle(Utils.DarkStyle);
            _controller.complete(controller);
          })
    );
  }

}

导入'dart:async'；
进口“包装：颤振/cupertino.dart”；
进口“包装：颤振/材料.省道”；
导入“包：google_-maps_-flatter/google_-maps_-flatter.dart”；
导入“package:location/location.dart”；
const双摄像头倾斜=0；
常数双摄像机_方位=0；
const LatLng SOURCE_LOCATION=LatLng（42.747932，-71.167889）；
施工图目的地位置=施工图（37.422，-122.084）；
类MyGoogleMap扩展StatefulWidget{
const MyGoogleMap（{Key}）：super（Key:Key）；//新构造函数
@凌驾
State createState（）=>MyGoogleMapState（）；
}
类MyGoogleMapState扩展了状态{
双摄像机_变焦=16；
CameraPosition初始CameraPosition；
//地图控制器
Completer _controller=Completer（）；
谷歌地图控制器；
//标记
Set _markers=Set（）；
Set _polylines=Set（）；
//用户的初始位置和当前位置
位置数据当前位置；
@凌驾
void initState（）{
super.initState（）；
}
@凌驾
小部件构建（构建上下文）{
initialCameraPosition=CameraPosition(
变焦：相机变焦，
倾斜：摄像机倾斜，
轴承：摄像机轴承，
目标：源位置）；
if（currentLocation！=null）{
initialCameraPosition=CameraPosition(
目标：LatLng（currentLocation.latitude，currentLocation.longitude），
变焦：相机变焦，
倾斜：摄像机倾斜，
轴承：摄像机轴承）；
}
返回容器(
身高：400，
孩子：谷歌地图(
mapToolbarEnabled:false，
myLocationEnabled:对，
同谋：是的，
tiltGesturesEnabled:false，
标记：_标记，
多段线：_多段线，
mapType:mapType.normal，
initialCameraPosition:initialCameraPosition，
onMapCreated:（谷歌地图控制器）{
//更改此选项以更改样式
//controller.setMapStyle（Utils.DarkStyle）；
_控制器。完成（控制器）；
})
);
}
}

@覆盖
小部件构建（构建上下文）{
SizeConfig（）.init（上下文）；
返回脚手架(
resizeToAvoidBottomPadding:false，
extendedBodyBehindAppBar:true，
扩展体：是的，
主体：容器(
高度：SizeFig.blockSizeVertical*100，
宽度：SizeFig.blockSizeHorizontal*100，
装饰：（selectedNavigationIndex==3
？背景。深色
：背景。正常），
子项：列（子项：[
顶栏（），
IndexedStack(
儿童：[
MyGoogleMap（），
MyGoogleMap（），
],
索引：selectedNavigationIndex，
),
底线(
这是。selectedNavigationIndex回调，selectedNavigationIndex），
])),
);
}

@覆盖
小部件构建（构建上下文）{
SizeConfig（）.init（上下文）；
返回脚手架(
resizeToAvoidBottomPadding:false，
extendedBodyBehindAppBar:true，
扩展体：是的，
主体：容器(
高度：SizeFig.blockSizeVertical*100，
宽度：SizeFig.blockSizeHorizontal*100，
装饰：（selectedNavigationIndex==3
？背景。深色
：背景。正常），
子项：列（子项：[
顶栏（），
IndexedStack(
儿童：[
MyGoogleMap（键：_MyGoogleMapState），
MyGoogleMap（键：_MyGoogleMapState），
],
索引：selectedNavigationIndex，
),
底线(
这是。selectedNavigationIndex回调，selectedNavigationIndex），
])),
);
}

如果要跨不同的路径传递数据/状态（如果我正确阅读了问题），请参阅。但是，如果您希望在同一小部件树的不同部分中具有相同的状态，则通常使用go-to方法。由于其与依赖注入的相似性，我倾向于选择它，但如果您不知道这意味着什么，请坚持使用provider。

如果您希望跨不同的路径传递数据/状态（如果我正确阅读了问题），请参阅。但是，如果您希望在同一小部件树的不同部分中具有相同的状态，则通常使用go-to方法。我倾向于选择它，因为它与依赖注入类似，但如果你不知道这意味着什么，请坚持使用provider。

肯定有更好的方法，但如果你找不到任何东西，你可能会使用provider或GetIt，并以这种方式获得相同的小部件，虽然提供小部件的状态而不是实际的小部件会好得多。嗨，也许可以为我提供一些示例代码。如何将小部件的状态传递给另一个小部件？看，肯定有更好的方法，但是如果你找不到任何东西，你可能会使用Provider或GetIt并以这种方式获得相同的小部件，尽管提供小部件的状态而不是实际的小部件会更好。嗨，也许可以为我提供一些示例代码。如何将小部件的状态传递给另一个小部件？请参阅

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);

    return Scaffold(
      resizeToAvoidBottomPadding: false,
      extendBodyBehindAppBar: true,
      extendBody: true,
      body: Container(
          height: SizeConfig.blockSizeVertical * 100,
          width: SizeConfig.blockSizeHorizontal * 100,
          decoration: (selectedNavigationIndex == 3
              ? backgrounds.dark
              : backgrounds.normal),
          child: Column(children: <Widget>[
            TopBar(),
            IndexedStack(
              children: <Widget>[
                MyGoogleMap(),
                MyGoogleMap(),
              ],
              index: selectedNavigationIndex,
            ),
            BottomBar(
                this.selectedNavigationIndexCallback, selectedNavigationIndex),
          ])),
    );
  }

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);

    return Scaffold(
      resizeToAvoidBottomPadding: false,
      extendBodyBehindAppBar: true,
      extendBody: true,
      body: Container(
          height: SizeConfig.blockSizeVertical * 100,
          width: SizeConfig.blockSizeHorizontal * 100,
          decoration: (selectedNavigationIndex == 3
              ? backgrounds.dark
              : backgrounds.normal),
          child: Column(children: <Widget>[
            TopBar(),
            IndexedStack(
              children: <Widget>[
                MyGoogleMap(key: _MyGoogleMapState),
                MyGoogleMap(key: _MyGoogleMapState),
              ],
              index: selectedNavigationIndex,
            ),
            BottomBar(
                this.selectedNavigationIndexCallback, selectedNavigationIndex),
          ])),
    );
  }