如何将列表值传递给新的小部件

Question

对于初学者，我有一个带有图像气泡的地图，当点击这些图像时，我试图将 PathImage 的值传递给下面的小部件。基本上试图做到这一点，以便当 onTap 发生时，它会在下面发布的 Hero 小部件中加载图像。我不明白如何正确地将值传递到下面的小部件中。我缺少什么来实现这一点？

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:flutter_spinkit/flutter_spinkit.dart';
import "package:latlong2/latlong.dart";
import 'package:location/location.dart';
import 'DetailScreen2.dart';

class CustomMarker extends StatefulWidget {
  double? latitude;
  double? longitude;
  CustomMarker({this.latitude, this.longitude});

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

class _MapsPageState extends State<CustomMarker> {
  List<Marker> markers = [];
  final Location _location = Location();
  double? userXCoordinate;
  double? userYCoordinate;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getPermission();
    setMarkers();
  }

  void getPermission() async {
    if (widget.latitude == null || widget.longitude == null) {
      bool serviceEnabled = await _location.serviceEnabled();
      if (serviceEnabled == false) {
        await _location.requestPermission();
      } else {
        await getLocation();
      }
    }
  }

  Future<void> getLocation() async {
    //check permission here
    LocationData pos = await _location.getLocation();
    setState(() {
      userXCoordinate = pos.latitude;
      userYCoordinate = pos.longitude;
    });
    //selectedPage = <Widget>[HomePage(stream: stream), MapsPage(latitude: userXCoordinate, longitude: userYCoordinate,),AddPost(camera: widget.camera,),ProfilePage()];
  }

  void setMarkers() {
    Stream<QuerySnapshot> stream =
    FirebaseFirestore.instance.collection("wllmtnnstpphotos").snapshots();
    stream.forEach((element) {
      element.docs.forEach((doc) {
        //add to marker list
        var docData = doc;
        markers.add(
            customMarker(docData["Lat"], docData["Lng"], docData["PathImage"]),
        );
      });
    });
  }

  Marker customMarker(x, y, docData) {
    return Marker(
      width: 30.0,
      height: 30.0,
      point: LatLng(x, y),
      builder: (ctx) => InkWell(
        child: Container(
          color: Colors.transparent,
          child: CircleAvatar(
            backgroundImage: CachedNetworkImageProvider(docData),
            backgroundColor: Colors.transparent,
            maxRadius: 50,
          ),
        ),
        onTap: () {
          MaterialPageRoute route = MaterialPageRoute(
            builder: (context) => DetailScreener2(docData.elementAt(2)["PathImage"]),
          );
          Navigator.push(context, route);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    var x = widget.latitude;
    var y = widget.longitude;
    return Scaffold(
      body: SafeArea(
          child: x != null || y != null
              ? map()
              : userXCoordinate == null || userYCoordinate == null
              ? loadingPage()
              : map()),
    );
  }

  Widget map() {
    return FlutterMap(
      options: new MapOptions(
          center: LatLng(45.0004173, -123.043808),
          minZoom: 1.0,
          swPanBoundary: LatLng(43.6877, -125.5089),
          nePanBoundary: LatLng(47.7378, -120.6644),
          slideOnBoundaries: true,
          screenSize: MediaQuery.of(context).size,
      ),
      layers: [
        new TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c']),
        MarkerLayerOptions(markers: markers)
      ],
    );
  }

  Widget loadingPage() {
    return Center(
      child: SpinKitCircle(
        color: Colors.black,
        size: 50.0,
      ),
    );
  }
}

这是我想将 PathImage 的值传递到下面的小部件。

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:pinch_zoom/pinch_zoom.dart';

class DetailScreener2 extends StatefulWidget {
  DetailScreener2([docData]);

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

class _DetailScreenState extends State<DetailScreener2> {

  @override
  void initState() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
    super.initState();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  }

  @override
  void dispose() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Container(
          color: Colors.black,
          child: Center(
            child: Hero(
              tag: 'imageHero',
              child: PinchZoom(child: CachedNetworkImage(imageUrl: 'PathImage')),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

在 customMarker 方法中，docData 变量是图像的路径，但在导航时您正在尝试访问 docData.elementAt(2)['imagepath']。像这样通过 MaterialPageRoute route = MaterialPageRoute( builder: (context) => DetailScreener2(imagePath : docData), ); 而不是使用 DetailScreener2([docData]) 在 DetailScreener2 中接收它，如下所示 final String imagePath; DetailScreener({required this.imagePath});

要访问此变量，请使用 CachedNetworkImage(imageUrl: widget.imagePath)