简介

高级的Flutter工程师往往都是从最简单的架构开始研究学习。

今天给大家带来的是Flutter中比较重要的状态管理框架Provider,也是每位Flutter开发者必学的框架。Provider功能比较强大,能够轻松实现一键换肤和语言切换等功能。本篇文章手把手教大家实现一个最简单的Provider框架,还不会的同学赶紧收藏起来慢慢学。

框架结构图

在这里插入图片描述

原理分析

在讲解Provider之前,读者需要了解Flutter原生提供的InheritedWidgetChangeNotifier的作用 才能真正理解Provider的共享数据机制。

InheritedWidget的作用

InheritedWidget是Flutter提供的一种重要的Widget组件,它提供了在Widget树中从上到下共享数据的能力,当InheritedWidget作为父Widget时,其内部的子Widget都能访问到父Widget中保存的数据。

示例如下:

  1. 定义一个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;
  }

}

  1. 子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的代码实现

  1. 定义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;
  }

}

  1. 定义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();
  }

}

  1. 自定义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。

  1. 我们来看一下最后的使用。
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等第三方优秀框架需要读者自己研究学习,理解框架实现的思路,学习框架的搭建。本文学习的重点不是写代码,而是根据现有的组件去实现一款优秀的框架,这也是小编所学习追求的。

最后

如果想要成为架构师或想突破20~30K薪资范畴,那就不要局限在编码,业务,要会选型、扩展,提升编程思维。此外,良好的职业规划也很重要,学习的习惯很重要,但是最重要的还是要能持之以恒,任何不能坚持落实的计划都是空谈。

如果你没有方向,这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》,帮大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。
img
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。

欢迎大家一键三连支持,若需要文中资料,直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓

PS:群里还设有ChatGPT机器人,可以解答大家在工作上或者是技术上的问题
图片

Logo

数据库是今天社会发展不可缺少的重要技术,它可以把大量的信息进行有序的存储和管理,为企业的数据处理提供了强大的保障。

更多推荐