1

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

我的示例页面链接在这里。

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'];
  }
}
4

1 回答 1

1

Flutter 可能错误地重用了您的标记。如果你给它们一个唯一的键，Flutter 不会不必要地重用/重建它们。

尝试像这样添加 UniqueKey()。

 return Marker(
      key: UniqueKey(),
      width: 30.0,
      height: 30.0,
于 2021-11-19T06:17:39.413 回答