Flutter中如何将map1.dart的createdMarkerPoints数据传递到homepage.dart

以下是针对你的需求的具体实现，通过回调函数和GlobalKey组合解决两种场景的数据传递问题：

1. 先实现 map1.dart 组件 #

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart'; // 假设使用谷歌地图插件

class Map1 extends StatefulWidget {
  // 用于地图点击时主动推送数据给主页的回调
  final ValueChanged<List<LatLng>>? onMarkerPointsUpdated;

  const Map1({super.key, this.onMarkerPointsUpdated});

  @override
  State<Map1> createState() => _Map1State();
}

class _Map1State extends State<Map1> {
  List<LatLng> createdMarkerPoints = [];

  // 暴露给主页的方法，用于主动获取当前标记点列表
  List<LatLng> getCurrentMarkerPoints() {
    return List.from(createdMarkerPoints); // 返回副本，避免外部直接修改内部状态
  }

  // 地图点击事件处理
  void _handleMapTap(LatLng position) {
    setState(() {
      createdMarkerPoints.add(position);
    });
    // 触发回调，把最新的标记点列表传给主页
    widget.onMarkerPointsUpdated?.call(createdMarkerPoints);
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onTap: _handleMapTap,
      markers: Set.from(createdMarkerPoints.map((point) => Marker(
            markerId: MarkerId(point.toString()),
            position: point,
          ))),
      initialCameraPosition: const CameraPosition(
        target: LatLng(30.2672, -97.7431),
        zoom: 12,
      ),
    );
  }
}

2. 再实现 homepage.dart 组件 #

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final GlobalKey<_Map1State> _mapComponentKey = GlobalKey();
  List<LatLng> _receivedMarkerPoints = [];

  // 场景1：点击主页按钮主动获取地图标记点
  void _fetchMarkerPoints() {
    final latestPoints = _mapComponentKey.currentState?.getCurrentMarkerPoints() ?? [];
    setState(() {
      _receivedMarkerPoints = latestPoints;
    });
    // 这里可添加数据后续处理逻辑，比如打印、展示等
    print('当前标记点总数：${latestPoints.length}');
  }

  // 场景2：接收地图点击后主动推送的更新数据
  void _onMarkerPointsUpdated(List<LatLng> points) {
    setState(() {
      _receivedMarkerPoints = points;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主页')),
      body: Column(
        children: [
          Expanded(
            // 嵌入地图组件，绑定key和回调
            child: Map1(
              key: _mapComponentKey,
              onMarkerPointsUpdated: _onMarkerPointsUpdated,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: ElevatedButton(
              onPressed: _fetchMarkerPoints,
              child: const Text('获取地图标记点'),
            ),
          ),
          // 展示接收到的标记点数据
          Text('已接收标记点数量：${_receivedMarkerPoints.length}'),
        ],
      ),
    );
  }
}

方案说明 #

• 场景1（主页按钮触发）：通过GlobalKey获取地图组件的状态实例，调用组件暴露的getCurrentMarkerPoints()方法，主动拉取最新标记点数据。
• 场景2（地图点击触发）：在地图组件中定义ValueChanged类型的回调参数，每次添加新标记点后，主动调用回调将最新数据推送给主页，实现实时同步。

内容的提问来源于stack exchange，提问作者emsiloader