移动 flutter map 时图像暂时与其他图像一起重新加载

Question

我正在使用 Firebase 将图像作为带有 CachedNetworkImage 的 CircleAvatar 加载到 Flutter 地图上。问题是当我四处移动地图时，图像会“跳舞”或重新加载其他图像。我不明白为什么其他图像有时会显示在图像加载的位置。这在移动浏览器上比在桌面上更明显。我如何做到这一点，以便如果需要重新绘制图像，它们不会在微秒内暂时将另一幅图像加载到其中。我不明白这是我编写 firebase 查询的方式造成的，还是图像值在 flutter 中的存储方式有问题。下面链接的示例页面和代码。我该怎么做才能阻止图像闪烁或重新加载？

我的示例页面已链接 here。

import 'package:cached_network_image/cached_network_image.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import "package:latlong2/latlong.dart";

class CustomMarker extends StatefulWidget {
  final double? latitude;
  final double? longitude;

  CustomMarker({this.latitude, this.longitude});

  @override
  _MapsPageState createState() => _MapsPageState();
}

class _MapsPageState extends State<CustomMarker> {
  List<Marker> list = [];
  List<String> listDocuments = [];

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

  void setMarkers() async {
    FirebaseFirestore firestore = FirebaseFirestore.instance;
    Query<Map<String, dynamic>> collectionReference =
        firestore.collection('wllmtnnstpphotos');
    collectionReference.snapshots().listen((event) {
      List<DocumentSnapshot> snapshots = event.docs;
      for (var map in snapshots) {
        Map<String, dynamic> data =
            map.data() as Map<String, dynamic>; // add this line
        MarkerCollectModelPhoto model =
            MarkerCollectModelPhoto.fromMap(data); // use data here
        String nameDocument = map.id;
        listDocuments.add(nameDocument);
        Marker marker = customMarker(model, nameDocument);
        setState(() {
          list.add(marker);
        });
      }
    });
  }

  Marker customMarker(
      MarkerCollectModelPhoto markerCollectModelPhoto, String nameDocument) {
    return Marker(
      width: 30.0,
      height: 30.0,
      point: LatLng(markerCollectModelPhoto.lat!, markerCollectModelPhoto.lng!),
      builder: (ctx) => InkWell(
        child: Container(
          color: Colors.transparent,
          child: CircleAvatar(
            foregroundImage: CachedNetworkImageProvider(
                markerCollectModelPhoto.pathImageSmall!),
            backgroundColor: Colors.transparent,
            maxRadius: 30,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FlutterMap(
      options: new MapOptions(
          center: LatLng(44.8004173, -122.8543808), minZoom: 1.0, zoom: 8.5),
      layers: [
        new TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        MarkerLayerOptions(
          markers: list,
        ),
      ],
    ));
  }
}

class MarkerCollectModelPhoto {
  double? lat, lng;
  String? name, pathImage, pathImageSmall, dateTime, uid, mileager;

  MarkerCollectModelPhoto(
      {this.lat,
      this.lng,
      this.name,
      this.pathImage,
      this.pathImageSmall,
      this.dateTime,
      this.mileager,
      this.uid});

  MarkerCollectModelPhoto.fromMap(Map<String, dynamic> map) {
    lat = map['Lat'];
    lng = map['Lng'];
    name = map['Racer'];
    pathImage = map['PathImage'];
    pathImageSmall = map['PathImageSmall'];
    dateTime = map['DateTime'];
    mileager = map['mileager'];
    uid = map['Uid'];
  }
}

Answer 1

Flutter 很可能错误地重用了您的标记。如果你给它们一个唯一的密钥，Flutter 就不会 reuse/rebuild 它们不必要的。

尝试像这样添加一个 UniqueKey()。

 return Marker(
      key: UniqueKey(),
      width: 30.0,
      height: 30.0,

移动 flutter map 时图像暂时与其他图像一起重新加载

Images temporarily reloading with other images when moving flutter map

dart

firebase

flutter

google-cloud-firestore

fluttermap