Flutter跨屏幕传递Marker列表的最佳实践方案咨询

绝对不推荐用全局变量——这会让状态变得不可控，后期维护、调试都麻烦，尤其是学习阶段，得养成良好的状态管理习惯。针对你用底部NavigationBar的场景，给你几个实用方案：

1. 让底部导航的父组件统一管理状态 #

这是最简单直接的方案，适合你的小项目场景：

• 把Marker列表放在底部导航所在的父Widget的State里
• 页面1获取到Marker数据后，通过回调函数把数据传递给父组件更新状态
• 页面2从父组件接收Marker列表作为参数，就能直接用

示例代码：

// 父组件
class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  List<Marker>? _markers;
  int _selectedIndex = 0;

  // 页面1用来传递Marker的回调
  void _updateMarkers(List<Marker> markers) {
    setState(() {
      _markers = markers;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          // 页面1传入回调
          PropertyListScreen(onMarkersLoaded: _updateMarkers),
          // 页面2传入Marker列表
          MapScreen(markers: _markers),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.list), label: '列表'),
          BottomNavigationBarItem(icon: Icon(Icons.map), label: '地图'),
        ],
      ),
    );
  }
}

// 页面1
class PropertyListScreen extends StatelessWidget {
  final Function(List<Marker>) onMarkersLoaded;

  const PropertyListScreen({required this.onMarkersLoaded, Key? key}) : super(key: key);

  Future<void> _fetchProperties(String zipCode) async {
    // 调用API获取房产数据
    final properties = await ApiService.getProperties(zipCode);
    // 转换为Marker列表
    final markers = properties.map((p) => Marker(...)).toList();
    // 传递给父组件
    onMarkersLoaded(markers);
  }

  @override
  Widget build(BuildContext context) {
    // 页面UI，比如输入邮政编码的按钮等
    return Center(
      child: ElevatedButton(
        onPressed: () => _fetchProperties('12345'),
        child: const Text('获取房产数据'),
      ),
    );
  }
}

// 页面2
class MapScreen extends StatelessWidget {
  final List<Marker>? markers;

  const MapScreen({this.markers, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: const CameraPosition(target: LatLng(0, 0), zoom: 10),
      markers: markers != null ? Set<Marker>.from(markers!) : {},
    );
  }
}

2. 使用轻量状态管理工具（适合后续扩展） #

如果以后你的项目功能变复杂，比如多个页面都要用到Marker数据，或者需要处理异步状态，可以用Provider、Riverpod这类轻量状态管理工具：

• 创建一个状态类，用来保存Marker列表和更新方法
• 页面1获取数据后调用更新方法
• 页面2监听状态变化，自动刷新地图

示例（用Provider）：

// 状态类
class MarkerProvider extends ChangeNotifier {
  List<Marker>? _markers;

  List<Marker>? get markers => _markers;

  void updateMarkers(List<Marker> markers) {
    _markers = markers;
    notifyListeners();
  }
}

// 在main里注册Provider
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => MarkerProvider(),
      child: const MyApp(),
    ),
  );
}

// 页面1更新状态
class PropertyListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () async {
          final properties = await ApiService.getProperties('12345');
          final markers = properties.map((p) => Marker(...)).toList();
          // 更新状态
          Provider.of<MarkerProvider>(context, listen: false).updateMarkers(markers);
        },
        child: const Text('获取房产数据'),
      ),
    );
  }
}

// 页面2监听状态
class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final markers = Provider.of<MarkerProvider>(context).markers;
    return GoogleMap(
      initialCameraPosition: const CameraPosition(target: LatLng(0, 0), zoom: 10),
      markers: markers != null ? Set<Marker>.from(markers) : {},
    );
  }
}

总结 #

• 小项目优先用父组件管理状态，代码简单直观，容易理解
• 项目复杂后再考虑状态管理工具，能更好地维护全局状态
• 绝对别用全局变量，会让你的代码变得混乱，后期排查问题难度翻倍

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