You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何不使用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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.31 01:45:45