如何将Riverpod Providers用作半全局变量？Flutter地图场景疑问

澄清Riverpod的误区：Provider并非只能全局 #

Riverpod的Provider默认是全局，但完全可以实现局部作用域的状态管理，而且所谓“闲置Provider”的问题只要正确使用就可以避免——当Provider所在的作用域被销毁时，它会自动被清理，不会占用资源。

两种可行的实现方案 #

方案一：用ProviderScope实现局部Riverpod状态

通过在主页面的父级包裹ProviderScope，并在其中override一个专门管理Markers的Provider，就能让状态只对主页面及其子组件可见，且页面销毁时Provider会被自动清理。

示例代码：

// 定义Markers状态管理器
class MarkersNotifier extends StateNotifier<List<Marker>> {
  MarkersNotifier() : super([]);

  void addMarker(Marker marker) {
    state = [...state, marker];
  }

  void removeMarker(String markerId) {
    state = state.where((m) => m.markerId.value != markerId).toList();
  }

  void clearAll() => state = [];
}

// 定义一个需要被局部override的Provider（不要放在全局公共文件）
final markersProvider = StateNotifierProvider<MarkersNotifier, List<Marker>>((ref) {
  throw UnimplementedError('请在局部ProviderScope中override此Provider');
});

// 主页面实现
class MapMainPage extends StatelessWidget {
  const MapMainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderScope(
      overrides: [
        // 在当前作用域内提供MarkersNotifier的实例
        markersProvider.overrideWith((ref) => MarkersNotifier()),
      ],
      child: Scaffold(
        appBar: const SearchBarComponent(), // 子组件可读取/更新markersProvider
        body: const GoogleMapComponent(), // 子组件可读取/更新markersProvider
      ),
    );
  }
}

// 子组件示例：搜索栏
class SearchBarComponent extends ConsumerWidget {
  const SearchBarComponent({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return AppBar(
      title: TextField(
        onSubmitted: (value) {
          // 模拟搜索后添加Marker
          final newMarker = Marker(
            markerId: MarkerId(value),
            position: const LatLng(31.2304, 121.4737), // 示例坐标
          );
          ref.read(markersProvider.notifier).addMarker(newMarker);
        },
      ),
      actions: [
        IconButton(
          icon: const Icon(Icons.clear),
          onPressed: () => ref.read(markersProvider.notifier).clearAll(),
        ),
      ],
    );
  }
}

这里的markersProvider只有在ProviderScope包裹的范围内可用，当MapMainPage被从导航栈中移除时，ProviderScope会销毁里面的MarkersNotifier，不会产生闲置。

方案二：用组件内状态管理（无需状态管理包）

如果你的状态逻辑不算复杂，也可以直接在主页面的ConsumerStatefulWidget中管理Markers列表，通过传递方法给子组件来操作状态，比层层回调更简洁。

示例代码：

class MapMainPage extends ConsumerStatefulWidget {
  const MapMainPage({super.key});

  @override
  ConsumerState<MapMainPage> createState() => _MapMainPageState();
}

class _MapMainPageState extends ConsumerState<MapMainPage> {
  List<Marker> _markers = [];

  void _addMarker(Marker marker) {
    setState(() {
      _markers = [..._markers, marker];
    });
  }

  void _clearMarkers() {
    setState(() {
      _markers.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SearchBarComponent(
        onAddMarker: _addMarker,
        onClear: _clearMarkers,
      ),
      body: GoogleMap(
        markers: Set<Marker>.from(_markers),
        onMapTap: (latLng) {
          _addMarker(Marker(
            markerId: MarkerId(latLng.toString()),
            position: latLng,
          ));
        },
        // 其他地图配置
      ),
    );
  }
}

class SearchBarComponent extends StatelessWidget {
  final Function(Marker) onAddMarker;
  final VoidCallback onClear;

  const SearchBarComponent({
    super.key,
    required this.onAddMarker,
    required this.onClear,
  });

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: TextField(
        onSubmitted: (value) {
          final newMarker = Marker(
            markerId: MarkerId(value),
            position: const LatLng(31.2304, 121.4737),
          );
          onAddMarker(newMarker);
        },
      ),
      actions: [
        IconButton(icon: const Icon(Icons.clear), onPressed: onClear),
      ],
    );
  }
}

这种方式不需要额外依赖，状态完全封装在主页面内部，适合简单场景。

纠正你的思路误区 #

Riverpod的Scoped Provider并不是“产生闲置Provider”的方案——只要你将ProviderScope和页面的生命周期绑定（比如放在页面的build方法里），当页面被销毁时，该作用域内的所有Provider都会被自动 dispose，不会留下闲置资源。Provider的作用域完全由你控制，并非只能全局。

内容的提问来源于stack exchange，提问作者P.Huang