前言
在我们上一篇文章中对Provider进行了介绍以及类结构的说明，最后还写了一个简单的示例，通过上一章节我们对Provider有了一个基本的了解，这一章节我们来说说Provider的8种提供者以及他们的使用区别。
Provider
Provider是最基本的Provider组件，可以使用它为组件树中的任何位置提供值，但是当该值更改的时候，它并不会更新UI，下面我们给出一个示例
第一步：创建模型
|
1 2 3 4 5 6 7 8 |
class UserModel { String name = "Jimi"; void changeName() { name = "hello"; } } |
第二步：应用程序入口设置
|
1 2 3 4 5 6 7 |
return Provider<UserModel>( create: (_) => UserModel(), child: MaterialApp( debugShowCheckedModeBanner: false, home: ProviderExample(), ), ); |
第三步：使用共享数据
关于Consumer后面将消费者在提及，我们这里只需要知道有两个消费者，第一个用于展示模型的数据，第二个用于改变模型的数据。
- 第一个
Comsumer是用于读取模型的数据name - 第二个
Consumer用于改变模型的数据name
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/provider_example/user_model.dart'; import 'package:provider/provider.dart'; class ProviderExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ProviderExample"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Consumer<UserModel>( builder: (_, userModel, child) { return Text(userModel.name, style: TextStyle( color: Colors.red, fontSize: 30 ) ); }, ), Consumer<UserModel>( builder: (_, userModel, child) { return Padding( padding: EdgeInsets.all(20), child: ElevatedButton( onPressed: (){ userModel.changeName(); }, child: Text("改变值"), ), ); }, ), ], ), ), ); } } |
运行结果
我们点击按钮的会导致模型数据改变，但是模型数据改变之后UI并没有变化也没有重建，那是因为Provider提供者组件不会监听它提供的值的变化。
ChangeNotifierProvider
它跟Provider组件不同，ChangeNotifierProvider会监听模型对象的变化，而且当数据改变时，它也会重建Consumer（消费者），下面我们给出一个示例
第一步：创建模型
细心点我们可以发现这里定义的模型有两处变化，如下：
- 混入了
ChangeNotifier - 调用了
notifyListeners()
因为模型类使用了ChangeNotifier，那么我们就可以访问notifyListeners()并且在调用它的任何时候，ChangeNotifierProvider都会收到通知并且消费者将重建UI。
|
1 2 3 4 5 6 7 8 9 10 11 |
import 'package:flutter/material.dart'; class UserModel1 with ChangeNotifier { String name = "Jimi"; void changeName() { name = "hello"; notifyListeners(); } } |
第二步：应用程序入口设置
|
1 2 3 4 5 6 7 |
return ChangeNotifierProvider<UserModel1>( create: (_) => UserModel1(), child: MaterialApp( debugShowCheckedModeBanner: false, home: ChangeNotifierProviderExample(), ), ); |
第三步：使用共享数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/change_notifier_provider_example/user_model1.dart'; import 'package:provider/provider.dart'; class ChangeNotifierProviderExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ChangeNotifierProvider"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Consumer<UserModel1>( builder: (_, userModel, child) { return Text(userModel.name, style: TextStyle( color: Colors.red, fontSize: 30 ) ); }, ), Consumer<UserModel1>( builder: (_, userModel, child) { return Padding( padding: EdgeInsets.all(20), child: ElevatedButton( onPressed: (){ userModel.changeName(); }, child: Text("改变值"), ), ); }, ), ], ), ), ); } } |
运行结果
FutureProvider
简单来说，FutureProvider用于提供在组件树中准备好使用其值时可能尚未准备好的值，主要是确保空值不会传递给任何子组件，而且FutureProvider有一个初始值，子组件可以使用该Future值并告诉子组件使用新的值来进行重建。
注意：
FutureProvider只会重建一次- 默认显示初始值
- 然后显示
Future值 - 最后不会再次重建
第一步：创建模型
这里和Provider不同的是增加了构造函数，以及changeName变成了Future，我们模拟网络请求延迟两秒后改变其值。
|
1 2 3 4 5 6 7 8 9 10 11 |
class UserModel2{ UserModel2({this.name}); String? name = "Jimi"; Future<void> changeName() async { await Future.delayed(Duration(milliseconds: 2000)); name = "hello"; } } |
第二步：提供Future
我们有一个方法，就是异步获取userModel2，模拟网络请求延迟两秒执行，最后修改了name并返回UserModel2
|
1 2 3 4 5 6 7 8 9 |
import 'package:flutter_provider_example/future_provider_example/user_model2.dart'; class UserFuture { Future<UserModel2> asyncGetUserModel2() async { await Future.delayed(Duration(milliseconds: 2000)); return UserModel2(name: "获取新的数据"); } } |
第三步：应用程序入口设置
initialData是默认值，create参数我们传了一个Future<UserModel2>，因为它接收的模型Create<Future<T>?>
|
1 2 3 4 5 6 7 8 |
return FutureProvider<UserModel2>( initialData: UserModel2(name: "hello"), create: (_) => UserFuture().asyncGetUserModel2(), child: MaterialApp( debugShowCheckedModeBanner: false, home: FutureProviderExample(), ), ); |
第四步：使用共享数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/future_provider_example/user_model2.dart'; import 'package:provider/provider.dart'; class FutureProviderExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("FutureProviderExample"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Consumer<UserModel2>( builder: (_, userModel, child) { return Text(userModel.name ?? "", style: TextStyle( color: Colors.red, fontSize: 30 ) ); }, ), Consumer<UserModel2>( builder: (_, userModel, child) { return Padding( padding: EdgeInsets.all(20), child: ElevatedButton( onPressed: (){ userModel.changeName(); }, child: Text("改变值"), ), ); }, ), ], ), ), ); } } |
运行结果
我们可以看到先展示默认值hello，最后获取到结果的时候展示了获取新的数据，我们尝试改变其值，虽然值改变但是并没有刷新UI。
StreamProvider
StreamProvider提供流值，是围绕StreamBuilder，所提供的值会在传入的时候替换掉新值。和FutureProvider一样，主要的区别在于值会根据多次触发重新构建UI。
如果你对StreamBuilder不太了解的话，那么你就很难理解StreamProvider，StreamProvider文档地址
第一步：创建模型
|
1 2 3 4 5 6 7 8 9 10 |
class UserModel3{ UserModel3({this.name}); String? name = "Jimi"; void changeName() { name = "hello"; } } |
第二步：提供Stream
下面这段代码类似计时器，每隔一秒钟生成一个数字
|
1 2 3 4 5 6 7 8 9 10 |
import 'package:flutter_provider_example/stream_provider_example/user_model3.dart'; class UserStream { Stream<UserModel3> getStreamUserModel() { return Stream<UserModel3>.periodic(Duration(milliseconds: 1000), (value) => UserModel3(name: "$value") ).take(10); } } |
第三步：应用程序入口设置
这里也有initialData初始值，和FutureProvider类似，只是create属性是获取一个Stream流。
|
1 2 3 4 5 6 7 8 |
return StreamProvider<UserModel3>( initialData: UserModel3(name: "hello"), create: (_) => UserStream().getStreamUserModel(), child: MaterialApp( debugShowCheckedModeBanner: false, home: StreamProviderExample(), ), ); |
第四步：使用共享数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/stream_provider_example/user_model3.dart'; import 'package:provider/provider.dart'; class StreamProviderExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("StreamProviderExample"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Consumer<UserModel3>( builder: (_, userModel, child) { return Text(userModel.name ?? "", style: TextStyle( color: Colors.red, fontSize: 30 ) ); }, ), Consumer<UserModel3>( builder: (_, userModel, child) { return Padding( padding: EdgeInsets.all(20), child: ElevatedButton( onPressed: (){ userModel.changeName(); }, child: Text("改变值"), ), ); }, ), ], ), ), ); } } |
运行结果
MultiProvider
在上面的例子中我们都只是返回了一个提供者，在实际开发过程中肯定会有多个提供者，我们虽然可以采用嵌套的方式来解决，但是这样无疑是混乱的，可读性级差。这个时候强大的MultiProvder就产生了，我们来看下示例:
第一步：创建两个模型
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import 'package:flutter/material.dart'; class UserModel1 with ChangeNotifier { String name = "Jimi"; void changeName() { name = "hello"; notifyListeners(); } } class UserModel4 with ChangeNotifier { String name = "Jimi"; int age = 18; void changeName() { name = "hello"; age = 20; notifyListeners(); } } |
第二步：应用程序入口设置
相对于方式一这种嵌套方式设置，方式二就显得尤为简单。
方式一：嵌套设置
|
1 2 3 4 5 6 7 8 9 10 |
return ChangeNotifierProvider<UserModel1>( create: (_) => UserModel1(), child: ChangeNotifierProvider<UserModel4>( create: (_) => UserModel4(), child: MaterialApp( debugShowCheckedModeBanner: false, home: MultiProviderExample(), ), ), ); |
方式二：使用MultiProvider
|
1 2 3 4 5 6 7 8 9 10 11 |
return MultiProvider( providers: [ ChangeNotifierProvider<UserModel1>(create: (_) => UserModel1()), ChangeNotifierProvider<UserModel4>(create: (_) => UserModel4()), /// 添加更多 ], child: MaterialApp( debugShowCheckedModeBanner: false, home: MultiProviderExample(), ), ); |
第三步：使用共享数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/change_notifier_provider_example/user_model1.dart'; import 'package:flutter_provider_example/multi_provider_example/user_model4.dart'; import 'package:provider/provider.dart'; class MultiProviderExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("MultiProviderExample"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Consumer<UserModel1>( builder: (_, userModel, child) { return Text(userModel.name, style: TextStyle( color: Colors.red, fontSize: 30 ) ); }, ), Consumer<UserModel4>( builder: (_, userModel, child) { return Text(userModel.age.toString(), style: TextStyle( color: Colors.green, fontSize: 30 ) ); }, ), Consumer2<UserModel1, UserModel4>( builder: (_, userModel1, userModel4, child) { return Padding( padding: EdgeInsets.all(20), child: ElevatedButton( onPressed: (){ userModel1.changeName(); userModel4.changeName(); }, child: Text("改变值"), ), ); }, ), ], ), ), ); } } |
运行结果
ProxyProvider
当我们有多个模型的时候，会有模型依赖另一个模型的情况，在这种情况下，我们可以使用ProxyProvider从另一个提供者获取值，然后将其注入到另一个提供者中。我们来看下代码演示
第一步：创建两个模型
下面我们创建了两个模型UserModel5和WalletModel，而WalletModel依赖与UserModel5，当调用WalletModel的changeName方法时会改变UserModel5里面的name，当然我们在实际开发的过程中并不是这么简单，这里只是演示模型依赖时如果使用ProxyProvider
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import 'package:flutter/material.dart'; class UserModel5 with ChangeNotifier { String name = "Jimi"; void changeName({required String newName}) { name = newName; notifyListeners(); } } class WalletModel { UserModel5? userModel5; WalletModel({this.userModel5}); void changeName() { userModel5?.changeName(newName: "JIMI"); } } |
第二步：应用程序入口设置
|
1 2 3 4 5 6 7 8 9 10 11 12 |
return MultiProvider( providers: [ ChangeNotifierProvider<UserModel5>(create: (_) => UserModel5()), ProxyProvider<UserModel5, WalletModel>( update: (_, userModel5, walletModel) => WalletModel(userModel5: userModel5), ) ], child: MaterialApp( debugShowCheckedModeBanner: false, home: ProxyProviderExample(), ), ); |
第三步：使用共享数据
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/proxy_provider_example/user_model5.dart'; import 'package:flutter_provider_example/proxy_provider_example/wallet_model.dart'; import 'package:provider/provider.dart'; class ProxyProviderExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ProxyProviderExample"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Consumer<UserModel5>( builder: (_, userModel, child) { return Text(userModel.name, style: TextStyle( color: Colors.red, fontSize: 30 ) ); }, ), Consumer<UserModel5>( builder: (_, userModel, child) { return Padding( padding: EdgeInsets.all(20), child: ElevatedButton( onPressed: (){ userModel.changeName(newName: "hello"); }, child: Text("改变值"), ), ); }, ), Consumer<WalletModel>( builder: (_, walletModel, child) { return Padding( padding: EdgeInsets.all(20), child: ElevatedButton( onPressed: (){ walletModel.changeName(); }, child: Text("通过代理改变值"), ), ); }, ), ], ), ), ); } } |
运行结果
ChangeNotifierProxyProvider
和ProxyProvider原理一样，唯一的区别在于它构建和同步ChangeNotifier的ChangeNotifierProvider，当提供者数据变化时，将会重构UI。
下面我们给出一个例子：
- 获取书籍列表
- 获取收藏书籍列表
- 点击书籍可加入或者取消收藏
- 通过代理实时重构UI
第一步：创建两个模型
1、BookModel
BookModel用户存储模型数据，将书籍转换成模型。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
class BookModel { static var _books = [ Book(1, "夜的命名数"), Book(2, "大奉打更人"), Book(3, "星门"), Book(4, "大魏读书人"), Book(5, "我师兄实在太稳健了"), Book(6, "深空彼岸"), ]; // 获取书籍长度 int get length => _books.length; // 根据ID获取书籍 Book getById(int id) => _books[id -1]; // 根据索引获取数据 Book getByPosition(int position) => _books[position]; // 更多.... } class Book { final int bookId; final String bookName; Book(this.bookId, this.bookName); } |
2、BookManagerModel
BookManagerModel主要用于管理书籍、收藏书籍、取消收藏等操作
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_model.dart'; class BookManagerModel with ChangeNotifier { // 依赖bookModel final BookModel _bookModel; // 获取数据所有的ID List<int>? _bookIds; // 构造函数 BookManagerModel(this._bookModel, {BookManagerModel? bookManagerModel}) : _bookIds = bookManagerModel?._bookIds ?? []; // 获取所有的书 List<Book> get books => _bookIds!.map((id) => _bookModel.getById(id)).toList(); // 根据索引获取数据 Book getByPosition(int position) => books[position]; // 获取书籍的长度 int get length => _bookIds?.length ?? 0; // 添加书籍 void addFaves(Book book) { _bookIds!.add(book.bookId); notifyListeners(); } // 删除书籍 void removeFaves(Book book) { _bookIds!.remove(book.bookId); notifyListeners(); } } |
第二步：应用程序入口设置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
return MultiProvider( providers: [ Provider(create: (_) => BookModel()), ChangeNotifierProxyProvider<BookModel, BookManagerModel>( create: (_) => BookManagerModel(BookModel()), update: (_, bookModel, bookManagerModel) => BookManagerModel(bookModel), ) ], child: MaterialApp( debugShowCheckedModeBanner: false, home: ChangeNotifierProxyProviderExample(), ), ); |
第三步：设置BottomNavigationBar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/pages/page_a.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/pages/page_b.dart'; class ChangeNotifierProxyProviderExample extends StatefulWidget { @override _ChangeNotifierProxyProviderExampleState createState() => _ChangeNotifierProxyProviderExampleState(); } class _ChangeNotifierProxyProviderExampleState extends State<ChangeNotifierProxyProviderExample> { var _selectedIndex = 0; var _pages = [PageA(), PageB()]; @override Widget build(BuildContext context) { return Scaffold( body: _pages[_selectedIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _selectedIndex, onTap: (index) { setState(() { _selectedIndex = index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.book), label: "书籍列表" ), BottomNavigationBarItem( icon: Icon(Icons.favorite), label: "收藏" ) ], ), ); } } |
第四步：书籍列表UI构建
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_manager_model.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_model.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/widgets/book_item.dart'; import 'package:provider/provider.dart'; class PageA extends StatelessWidget { @override Widget build(BuildContext context) { var bookModel = Provider.of<BookModel>(context); return Scaffold( appBar: AppBar( title: Text("书籍列表"), ), body: ListView.builder( itemCount: bookModel.length, itemBuilder: (_, index) => BookItem(id: index + 1), ), ); } } |
第五步：收藏列表UI构建
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_manager_model.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/widgets/book_item.dart'; import 'package:provider/provider.dart'; class PageB extends StatelessWidget { @override Widget build(BuildContext context) { var bookManagerModel = Provider.of<BookManagerModel>(context); var bookCount = bookManagerModel.length; return Scaffold( appBar: AppBar( title: Text("收藏列表"), ), body: ListView.builder( itemCount: bookCount, itemBuilder: (_, index) => BookItem(id: bookManagerModel.getByPosition(index).bookId), ), ); } } |
其他辅助封装类
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_manager_model.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_model.dart'; import 'package:provider/provider.dart'; class BookButton extends StatelessWidget { final Book book; BookButton({ Key? key, required this.book }) : super(key: key); @override Widget build(BuildContext context) { var bookManagerModel = Provider.of<BookManagerModel>(context); return GestureDetector( onTap: bookManagerModel.books.contains(this.book) ? () => bookManagerModel.removeFaves(this.book) : () => bookManagerModel.addFaves(this.book), child: SizedBox( width: 100, height: 60, child: bookManagerModel.books.contains(this.book) ? Icon(Icons.star, color: Colors.red,) : Icon(Icons.star_border), ), ); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import 'package:flutter/material.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/models/book_model.dart'; import 'package:flutter_provider_example/change_notifier_proxy_provider_example/widgets/book_button.dart'; import 'package:provider/provider.dart'; class BookItem extends StatelessWidget { final int id; BookItem({ Key? key, required this.id }) : super(key: key); @override Widget build(BuildContext context) { var bookModel = Provider.of<BookModel>(context); var book = bookModel.getById(id); return ListTile( leading: CircleAvatar( child: Text("${book.bookId}"), ), title: Text("${book.bookName}", style: TextStyle( color: Colors.black87 ), ), trailing: BookButton(book: book), ); } } |
运行结果
ListenableProxyProvider
ListenableProxyProvider是ListenableProvider的一个变体，但是在使用上和ChangeNotifierProvider效果惊人的一致，如果大家对ListenableProxyProvider有更深的理解，请联系我补充。
总结
Provider为我们提供了非常多的提供者，总共有八种。但我们比较常用的是ChangeNotifierProvider、MultiProvider、ChangeNotifierProxyProvider，关于其他的提供者可根据自己的实际应用场景来。