如何使用 Google 地图插件 Flutter 为另一个类的相机设置动画

Question

我有一个main.dart文件，我正在其中构建一个HomePage()带有抽屉、列表图块和地图的文件。我已经在另一个 dart 文件中实现了谷歌地图插件（参见下面的代码），我只是MapPage()在HomePage().

现在，当我通过调用函数按下抽屉中的列表图块之一时，我需要为相机设置动画goToLoyola()，所以我的问题是，如何从 访问此函数HomePage()？

抱歉，我觉得我的问题很糟糕，但我是新人，仍在学习颤振。谢谢。

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  GoogleMapController _controller;
  LatLng _currentLocation;
  CameraPosition _initialCameraLocation;
  StreamSubscription _locationSubscription;

  Location _location = new Location();
  String error;

  goToLoyola() {
    _controller.animateCamera(CameraUpdate.newCameraPosition(_loyolaCampus));
  }

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

    initPlatformState();
    _locationSubscription =
        _location.onLocationChanged().listen((newLocalData) {
      setState(() {
        _currentLocation =
            LatLng(newLocalData.latitude, newLocalData.longitude);
        _initialCameraLocation = CameraPosition(
          target: _currentLocation,
          zoom: CAMERA_ZOOM,
          tilt: CAMERA_TILT,
          bearing: CAMERA_BEARING,
        );
      });
    });
  }

  @override
  void dispose() {
    if (_locationSubscription != null) {
      _locationSubscription.cancel();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    while (_initialCameraLocation == null) {
      return Text("Loading Map");
    }
    return GoogleMap(
        myLocationEnabled: true,
        myLocationButtonEnabled: true,
        compassEnabled: false,
        tiltGesturesEnabled: true,
        mapType: MapType.normal,
        indoorViewEnabled: true,
        trafficEnabled: false,
        initialCameraPosition: _initialCameraLocation,
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
        });
  }

Answer 1

您可以尝试添加Completer<GoogleMapController>到 MapPage 构造函数中。例如：

class SamplePage extends StatefulWidget {

    Completer<GoogleMapController> completer;

    SamplePage({Key key, this.completer}) : super(key: key);

    @override
    State<StatefulWidget> createState() => SamplePageState();

}

class SamplePageState extends State<SamplePage> {

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

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: GoogleMap(
                mapType: MapType.normal,
                myLocationEnabled: true,
                myLocationButtonEnabled: true,
                initialCameraPosition: _defaultCameraPosition,
                onMapCreated: (GoogleMapController controller) async {
                    widget.completer.complete(controller);
                },
            )
        );
    }

    static final CameraPosition _defaultCameraPosition = CameraPosition(
        target: LatLng(1.3139961, 103.7041659),
        zoom: 14.4746,
    );

}

然后在您HomePage()添加一个新函数，如下所示：

...
...

Completer<GoogleMapController> _completer = Completer();

Future<void> animateTo(double lat, double lng) async {
    final c = await _completer.future;
    final p = CameraPosition(target: LatLng(lat, lng), zoom: 14.4746);
    c.animateCamera(CameraUpdate.newCameraPosition(p));
}

...
...

不要忘记将_completer变量传递给MapPage(completer: _completer)