Flutter中使用Provider

最新推荐文章于 2025-11-02 17:19:55 发布

原创最新推荐文章于 2025-11-02 17:19:55 发布 · 441 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #provider

flutter 专栏收录该内容

10 篇文章

订阅专栏

这篇博客详细介绍了在Flutter应用中如何使用Provider库进行状态管理。通过创建ChangeNotifier类的子类User和Order，设置和获取数据，以及在Widget中监听数据变化并实时更新UI。博主还提醒在调用Provider.of时需要注意listen参数的设置，以避免运行时错误。

前言.相当于全局变量，只要一改数据，引用到的地方就会自动刷新UI。
1.导入：provider: 5.0.0
2.写model类

class User extends ChangeNotifier{
  String _name;
  String _gender;
  User(this._name, this._gender);

  set setName(String value) {
    _name = value;
    notifyListeners();
  }

  String get gender => _gender;

  String get name => _name;

  // Provider.of<User>(context,listen: false).setGender="famale";
  set setGender(String value) {
    _gender = value;
    notifyListeners();
  }
  // Provider.of<User>(context,listen: false).setName2("famale");
  void setName2(String value){
    _name = value;
    notifyListeners();
    print('setName2 call');
  }

}

class Order extends ChangeNotifier{
  int _id;
  String _name;

  Order(this._id, this._name);

  String get name => _name;

  int get id => _id;

  set name(String value) {
    _name = value;
    NotificationListener();
  }

  set id(int value) {
    _id = value;
    NotificationListener();
  }
}

3.类似注册：
（1）单个对象

runApp(
    ChangeNotifierProvider<User>.value(
    child: MaterialApp(
      home: MyApp(),
    ),
      value: User('yuren','fame'),
    )
    );

（2）多个对象MultiProvider

  runApp(
      MultiProvider(
      providers: [
      //以下两种创建都可以，如果是同一个model类，则使用最近的，即使用 User('yagao','lala')
        //ChangeNotifierProvider(create: (_)=>User('SSG', '男')),
        ChangeNotifierProvider<User>.value(value: User('T1','男男')),
        ChangeNotifierProvider<User>.value(value: User('yagao','lala')),
        ChangeNotifierProvider(create: (_)=>Order(1,'alibaba'))
      ],
      child: MaterialApp(
        home: MyApp(),
      )
  )
  );

4.引用

Text("name:${Provider.of<User>(context).name},gender:${Provider.of<Order>(context).name}")

5.修改，结果就是引用的地方都刷新了。

        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<User>(context,listen: false).setName2("gunsitan");
            Provider.of<User>(context,listen: false).setGender="famale";
            Provider.of<Order>(context,listen: false).name ='order tencent';
          },
          child: Icon(Icons.add),
        ),

注意：这里的listen: false一定要带上，以前的不要，现在新的要，不然报错。