Flutter 状态管理 Provider

最新推荐文章于 2025-06-26 16:45:30 发布

原创最新推荐文章于 2025-06-26 16:45:30 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #provider #状态管理 #dart

Flutter 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Flutter的状态管理工具Provider的使用，强调其简化监听回调的功能。通过在main方法中设置代码，创建ChangeNotifier的子类来管理数据，并在需要的地方进行数据绑定和刷新。文章举例说明了如何在登录后利用Provider进行页面跳转，提醒开发者注意根据需求选择Provider的层级，避免将所有数据集中管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter 状态管理，实际来说就是数据和视图的绑定和刷新；
这块对应到 H5，就比较好理解，这个概念也是从前端来到；
对应到客户端，就是监听回调，类似事件总线（EventBus）；

Provider 基本使用：

建议在 main 方法加上这段代码，防止热重载报错，如果还是报错就必须点击下 run 按钮了；

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Provider.debugCheckInvalidValueType = null;
  ......
}

创建 Model，继承 ChangeNotifier；

class ATheme with ChangeNotifier {
  double textSize = 16;
  int bgColor = 0xffff0000;
  int textColor = 0xff666666;

  void setTheme(int bgColor) {
    textSize = 18;
    this.bgColor = bgColor;
    textColor = 0xff333333;
    // 调用这个方法，通知所有监听
    notifyListeners();
  }
}

创建共享数据；

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Provider.debugCheckInvalidValueType = null;
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: new ATheme()),
        ChangeNotifierProvider.value(value: new LoginInfo()),
      ],
      child: MaterialApp(
        home: StartPage(),
      ),
    ),
  );
}

绑定和刷新数据；

class ThemeChangePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 注意在 build 里面调用 Provider.of<ATheme>(context); 就会自动注册监听；也不用担心重复注册；
    ATheme appTheme = Provider.of<ATheme>(context);
    LoginInfo loginInfo = Provider.of<LoginInfo>(context);
    return Scaffold(
      // 这里可以直接使用 model 的属性了，如果有变化会自动刷新
      backgroundColor: Color(appTheme.bgColor),
      appBar: AppBar(
        title: Text("改变主题 ${loginInfo.name}"),
      ),
      body: Column(
        children: <Widget>[
          FlatButton(
            onPressed: () {
              appTheme.setTheme(0xffff00ff);
            },
            child: Text("红"),
          ),
          FlatButton(
            onPressed: () {
              appTheme.setTheme(0xff00ffff);
            },
            child: Text("黄"),
          ),
          FlatButton(
            onPressed: () {
              appTheme.setTheme(0xff0000ff);
            },
            child: Text("蓝"),
          ),
        ],
      ),
    );
  }
}

如果我只是想要监听回调，比如登陆后跳转到某个页面；

class LoginInfoManager with ChangeNotifier {
  static LoginInfoManager instance = LoginInfoManager();

  String id = "没信息ID";
  String name = "没信息name";

  void setLoginInfo() {
    id = "测试ID";
    name = "测试名称";
    notifyListeners();
  }
}

class _StartPageState extends State<StartPage> {
  @override
  void initState() {
    super.initState();
    // 手动添加监听
    LoginInfoManager.instance.addListener(onLoginChanged);
  }

  void onLoginChanged() {
    LoginInfoManager loginInfo = LoginInfoManager.instance;
    print("${loginInfo.name}");
  }

  @override
  void dispose() {
  	// 手动移除监听
    LoginInfoManager.instance.removeListener(onLoginChanged);
    super.dispose();
  }
  
}