flutter - 如何使用 Google Maps Plugin Flutter 为另一个类的相机制作动画

Question

我有一个 main.dart 文件，我正在其中构建一个带有抽屉、列表图 block 和 map 的 HomePage()。我已经在另一个 dart 文件中实现了 google maps 插件(请参见下面的代码)，我只是在 HomePage() 的脚手架主体中调用 MapPage() .

现在我需要通过调用函数 goToLoyola() 按下抽屉中的列表图 block 之一来设置相机动画，所以我的问题是，如何从 主页() ?

抱歉，我觉得我的问题很糟糕，但我是新手，还在学习 flutter。谢谢。

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

...
...

Don't forget to pass your _completer variable to your MapPage(completer: _completer)