如何不使用Provider,用MobX为Flutter应用设置全局状态?
不使用Provider通过MobX实现全局变量的方法
完全可以通过直接创建全局单例的MobX Store实例来实现,无需依赖Provider。核心思路是在Store文件中直接初始化实例,在应用任意位置导入后即可读写全局变量。
1. 创建全局MobX Store
编写一个MobX Store类,并直接在文件内初始化全局实例:
import 'package:mobx/mobx.dart'; // 全局共享的Store实例,直接初始化 final globalStore = GlobalStore(); // MobX Store实现 class GlobalStore = _GlobalStore with _$GlobalStore; abstract class _GlobalStore with Store { // 定义全局可观察变量 @observable String appTheme = 'light'; @observable int userScore = 0; // 定义修改变量的Action @action void switchTheme(String newTheme) { appTheme = newTheme; } @action void addScore(int points) { userScore += points; } }
2. 在UI组件中使用全局Store
在需要的Widget中直接导入全局实例,配合Observer监听变量变化以自动刷新UI,或直接调用Action修改值:
import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'path/to/your/global_store.dart'; class SettingsPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Padding( padding: EdgeInsets.all(20), child: Column( children: [ // 用Observer监听主题变化,自动更新文本 Observer( builder: (_) => Text('当前主题:${globalStore.appTheme}'), ), SizedBox(height: 16), ElevatedButton( onPressed: () { // 直接调用Action修改全局主题变量 globalStore.switchTheme( globalStore.appTheme == 'light' ? 'dark' : 'light' ); }, child: Text('切换主题'), ), SizedBox(height: 32), Observer( builder: (_) => Text('用户得分:${globalStore.userScore}'), ), ElevatedButton( onPressed: () => globalStore.addScore(10), child: Text('增加10分'), ), ], ), ), ); } }
3. 关键注意点
- 这种方式是单例模式,整个应用共享同一个Store实例,适合纯全局状态的场景
- 无需在应用根节点包裹Provider,减少层级复杂度
- 测试时可通过重新赋值
globalStore为测试实例,快速模拟不同状态 - 如果需要多实例或依赖注入场景,这种方式灵活性稍弱,但全局变量场景完全够用
内容的提问来源于stack exchange,提问作者S Sharanya Bharghavi
相关产品推荐
相关产品推荐

