在PageView构建中Flutter GoogleMap只能使用一次

Question

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

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

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

我试过了：

AutomaticKeepAliveClientMixin

和

@override bool get wantKeepAlive => true;

但没有奏效。

Answer 1

也许你忘记在构建方法中调用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;
}

Answer 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;
}

Answer 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(),
],
);
}
}

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