简介
“ 本文正在参与「金石计划」 ”
高档的Flutter工程师往往都是从最简单的架构开端研究学习。
咱们好这儿是Android研究员，今天给咱们带来的是Flutter中比较重要的状态管理结构Provider，也是每位Flutter开发者必学的结构。Provider功用比较强大，可以轻松完成一键换肤和言语切换等功用。本篇文章手把手教咱们完成一个最简单的Provider结构，还不会的同学赶忙收藏起来渐渐学。
结构结构图
原理分析
在讲解Provider之前，读者需求了解Flutter原生供给的InheritedWidget和ChangeNotifier的效果 ， 才干真实了解Provider的同享数据机制。
InheritedWidget的效果
InheritedWidget是Flutter供给的一种重要的Widget组件，它供给了在Widget树中从上到下同享数据的能力，当InheritedWidget作为父Widget时，其内部的子Widget都能访问到父Widget中保存的数据。
示例如下：
- 界说一个ShareWidget承继自InheritedWidget，其中界说一个data用来保存同享数据。其ShareWidget代码如下:
class ShareWidget extends InheritedWidget{
const ShareWidget({super.key, required super.child,required this.data});
final int data; //在子树中同享的数据
//界说静态办法，数据同享给子Widget运用
static ShareWidget? of(BuildContext context){
//调用子控件的didChangeDependencies和rebuild办法
return context.dependOnInheritedWidgetOfExactType<ShareWidget>();
}
//当回调决定当data产生变化时，告诉子widget中运用date数据的widget履行build构建。
@override
bool updateShouldNotify(covariant ShareWidget oldWidget) {
//当新旧数据产生变化时，告诉子Widget从头构建
return oldWidget.data != data;
}
}
- 子Widget经过ShareWidget.of办法访问ShareWidget中的同享数据data。当data数据产生改动时，会告诉子Widget从头构建，内部调用了子Widget的setState(){} 办法。
ChangeNotifier的效果
信任各位同学对Android中的EventBus都很了解这种订阅者模式，Flutter中为咱们供给了ChangeNotifier完成订阅者模式。只需求承继ChangeNotifier就能完成数据的监听。咱们来看一下ChangeNotifier内部源码就明白了。
class ChangeNotifier implements Listenable {
List listeners=[];
@override
void addListener(VoidCallback listener) {
//添加监听器
listeners.add(listener);
}
@override
void removeListener(VoidCallback listener) {
//移除监听器
listeners.remove(listener);
}
void notifyListeners() {
//告诉一切监听器，触发监听器回调
listeners.forEach((item)=>item());
}
....
}
ChangeNotifier承继自Listenable， 内部供给了addListener,removeListener,notifyListeners三个办法。这个是典型的订阅者模式。
Provider的代码完成
- 界说InheritedProvider类承继于InheritedWidget。这儿传的是泛型。便于同享一切数据类型。
class InheritedProvider<T> extends InheritedWidget{
const InheritedProvider({super.key, required Widget child,
required this.data}):super(child: child);
///需求同享的数据
final T data;
@override
bool updateShouldNotify(covariant InheritedProvider<T> oldWidget) {
//数据变化时告诉子widget重建
return oldWidget.data != data;
}
}
- 界说ShopModel承继ChangeNotifier,用来供给需求同享的数据。这儿界说int类型的调集。当添加完数据之后调用notifyListeners（）,告诉一切的订阅者更新数据。
class ShopModel extends ChangeNotifier{
final List<int> _items = [];
List<int> get items =>_items;
int get totalCount =>_items.fold<int>(0, (value, element)=>value+element);
///添加数据后，告诉一切订阅者
void addShop(int num){
_items.add(num);
notifyListeners();
}
}
- 自界说ChangeNotifierProvider承继于StatefulWidget，因为ChangeNotifierProvider内部涉及到widget的重建，所以需求承继有状态的StatefulWidget。
class ChangeNotifierProvider<T extends ChangeNotifier> extends StatefulWidget{
const ChangeNotifierProvider({super.key, required this.data, required this.child});
final Widget child;
final T data;
static T of<T>(BuildContext context){
var provider =context.dependOnInheritedWidgetOfExactType<InheritedProvider<T>>();
return provider!.data;
}
@override
State<ChangeNotifierProvider<T>> createState() =>_ChangeNotifierProviderState<T>();
}
在ChangeNotifierProvider中供给了静态办法of用来供给给子Widget获取同享数据 T，这儿的T指的的ShopModel。
class _ChangeNotifierProviderState<T extends ChangeNotifier> extends State<ChangeNotifierProvider<T>>{
///更新从头构建wiget
void update(){
setState(() {
});
}
@override
void didUpdateWidget(covariant ChangeNotifierProvider<T> oldWidget) {
if(oldWidget.data != widget.data){
oldWidget.data.removeListener(update);
widget.data.addListener(update);
}
super.didUpdateWidget(oldWidget);
}
@override
void initState() {
///注册监听
widget.data.addListener(update);
super.initState();
}
@override
void dispose() {
///移除监听
widget.data.removeListener(update);
super.dispose();
}
@override
Widget build(BuildContext context) {
///这儿运用InheritedProvider作为父widget，同享数据给子widget
return InheritedProvider<T>(data: widget.data, child: widget.child);
}
}
在_ChangeNotifierProviderState注册了data的数据监听，本文指的是ShopModel，当ShopModel产生变化时，经过调用ShopModel中的notifyListeners（）办法，告诉一切的监听者。调用_ChangeNotifierProviderState中的update办法，update办法调用了setState（）{}，调用当前Widget的rebuild办法产生从头构建。_ChangeNotifierProviderState运用InheritedProvider作为父widget是为了同享数据data也就是ShopModel给子Widget。
- 咱们来看一下最后的运用。
ChangeNotifierProvider<CarModel>(
data: ShopModel(),
child: Builder(builder: (context) {
return Center(child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Builder(builder: (context) {
var cart =
ChangeNotifierProvider.of<ShopModel>(context);
return Text("计算结果:${cart.totalCount}");
}),
const SizedBox(
height: 40,
),
ElevatedButton(
onPressed: () {
ChangeNotifierProvider.of<CarModel>(context)
.addShop(10);
},
child: const Text('添加数字'))
],
),);
}))
当咱们点击添加数字按钮，经过ChangeNotifierProvider.of(context)返回的ShopModel，调用ShopModel的addShop办法，addShop又调用了notifyListeners，通监听者ChangeNotifierProvider从头构建，显示最新的数据。
总结
InheritedWidget，ChangeNotifier，Provider在Flutter中的运用非常广泛，也比较重要，也是作为Flutter开发者必需求学会运用的组件，除了这些能完成同享数据，还有Bloc等第三方优异结构需求读者自己研究学习，了解结构完成的思路，学习结构的搭建。本文学习的要点不是写代码，而是依据现有的组件去完成一款优异的结构，这也是小编所学习追求的。
