繁体   English   中英

谷歌地图 + CustomPaint Flutter

[英]Google Maps + CustomPaint Flutter

将 CustomPaint 小部件置于 Google 地图小部件之上时,地图不再接收触摸事件(滚动、平移、点击等)。

是否可以在保持地图交互的同时将 CustomPaint 小部件放在地图上方? 这是一个解释案例的示例代码:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() =>
    runApp(
        MaterialApp(
          title: 'Flutter Google Maps Demo',
          home: Scaffold(
            body: Scaffold(
              body: Stack(children: <Widget>[
                GoogleMap(
                  initialCameraPosition: CameraPosition(
                    target: LatLng(37.42796133580664, -122.085749655962),
                    zoom: 14.4746,
                  ),
                ),
                CustomPaint(
                  painter: ShapesPainter(),
                  child: Container(height: 500),
                )
              ],)

            ),
          ),
        )
    );

class ShapesPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Color(0xFF3f6cbf);
    canvas.drawCircle(Offset(0, 0), 300, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

IgnorePointer包裹CustomPainter小部件,它将忽略任何点击或其他手势阅读更多

最终代码

Stack(
  children: <Widget>[
    GoogleMap(
      initialCameraPosition: CameraPosition(
        target: LatLng(37.42796133580664, -122.085749655962),
        zoom: 14.4746,
      ),
    ),
    IgnorePointer(
      child: CustomPaint(
        painter: ShapesPainter(),
        child: Container(height: 500),
      ),
    )
  ],
)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM