变焦监听器

Question

我想知道，在flutter_map包v. 0.13.1中是否存在一些缩放更改事件侦听器？

我试着根据缩放的大小来改变行程宽度。我该怎么处理呢？

Answer 1

您可以使用MapOptions属性onPositionChanged --它是每次在地图上移动时调用的回调，即使在缩放时也是如此。通过这个回调，您可以填充一个Stream，您可以监听它。

下面是我的完整测试代码：

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _controller = MapController();

  // Create your stream
  final _streamController = StreamController<double>();
  Stream<double> get onZoomChanged => _streamController.stream;

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

    // Add your listener
    onZoomChanged.listen((event) {
      print('New zoom is $event');
    });
  }

  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      // Some basic zoom control buttons
      floatingActionButton: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            onPressed: () =>
                _controller.move(_controller.center, _controller.zoom + 1),
            child: Icon(Icons.zoom_in),
          ),
          const SizedBox(height: 8),
          FloatingActionButton(
            onPressed: () =>
                _controller.move(_controller.center, _controller.zoom - 1),
            child: Icon(Icons.zoom_out),
          )
        ],
      ),
      body: FlutterMap(
        mapController: _controller,
        options: MapOptions(
          center: LatLng(51.5, -0.09),
          zoom: 13.0,
          onPositionChanged: (position, hasGesture) {
            // Fill your stream when your position changes
            final zoom = position.zoom;
            if (zoom != null) {
              _streamController.sink.add(zoom);
            }
          },
        ),
        layers: [
          TileLayerOptions(
              urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
              subdomains: ['a', 'b', 'c']),
          MarkerLayerOptions(
            markers: [
              Marker(
                width: 80.0,
                height: 80.0,
                point: LatLng(51.5, -0.09),
                builder: (ctx) => Container(
                  child: FlutterLogo(),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

控制台输出：

PS D:\Documents\Projects\so_tests> flutter run -d chrome
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             13,4s
This app is linked to the debug service: ws://127.0.0.1:64606/bNK9z0-_2N8=/ws
Debug service listening on ws://127.0.0.1:64606/bNK9z0-_2N8=/ws

 Running with sound null safety 

  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
New zoom is 13
New zoom is 12
New zoom is 11
New zoom is 10
New zoom is 11
New zoom is 12