美文网首页
Flutter入门13 -- 状态管理

Flutter入门13 -- 状态管理

作者: YanZi_33 | 来源:发表于2021-12-03 15:27 被阅读0次
    • 状态管理是声明式编程非常重要的一个概念,Flutter是属于声明式编程;
    • 在Flutter开发过程中,我们有大量的State需要进行管理,这些大量State的改变,正是更新界面,刷新界面;

    状态管理分类

    • 状态管理分类为短时状态应用状态
    • 短时状态:只需要在自己的widget中使用即可,
      • 简单的计数器counter
      • PageView组件记录当前的页面
      • 动画记录当前的进度
      • BottomNavigationBar中当前被选中的tab
    • 这种状态我们只需要使用StatefulWidget对应的State类自己管理即可,widget树中的其他组件不需要访问这个状态;
    • 应用状态:其需要在多个组件之间进行状态数据的共享;
      • 个性化选项的设置
      • 用户登陆状态信息
    • 针对应用状态,因为要在不同组件之间传递状态数据,如果涉及的组件很多,就会造成代码的耦合度很高,这对于代码的编写质量与代码的维护都是非常差的,这个时候我们就需要选择全局状态管理的方式,来对状态进行统一的管理与应用;
    • 在开发的过程中,并没有明确规则去区分哪些状态是短时状态,哪些状态时应用状态,某些短时状态可能在之后的开发维护中需要升级为应用状态;
    • 我们可以遵守下面这幅图的规则:
    image.png

    共享状态管理

    InheritedWidget
    • InheritedWidget可实现跨组件数据的传递
    • 定义一个共享数据组件SFCounterWidget,需要继承自inheritedWidget,案例代码如下所示:
    import 'package:flutter/material.dart';
    
    main() => runApp(SFMyApp());
    
    class SFCounterWidget extends InheritedWidget {
      final int counter;
    
      SFCounterWidget({this.counter, Widget child}) : super(child:child);
    
      static SFCounterWidget of(BuildContext ctx) {
        //沿着Element树 去找到最近的SFCounterWidgetElement,然后从element中取出widget对象
        return ctx.dependOnInheritedWidgetOfExactType();
      }
    
      //返回true:依赖当前SFCounterWidget的widget的state类 会执行didChangeDependencies()方法
      @override
      bool updateShouldNotify(SFCounterWidget oldWidget) {
        return oldWidget.counter != counter;
      }
    }
    
    class SFMyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: SFHomePage(),
        );
      }
    }
    
    class SFHomePage extends StatefulWidget {
      @override
      _SFHomePageState createState() => _SFHomePageState();
    }
    
    class _SFHomePageState extends State<SFHomePage> {
      int _counter = 1000;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Flutter测试共享数据"),
          ),
          body: SFCounterWidget(
            counter: _counter,
            child: Column(
              children: [
                SFShowData01(),
                SFShowData02(),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: (){
              setState(() {
                _counter++;
              });
            },
          ),
        );
      }
    }
    
    class SFShowData01 extends StatefulWidget {
      @override
      _SFShowData01State createState() => _SFShowData01State();
    }
    
    class _SFShowData01State extends State<SFShowData01> {
    
      @override
      void didChangeDependencies() {
        super.didChangeDependencies();
        print("_SFShowData01State 执行了 didChangeDependencies方法");
      }
    
      @override
      Widget build(BuildContext context) {
        int counter = SFCounterWidget.of(context).counter;
        return Card(
          color: Colors.red,
          child: Text("当前计数: $counter"),
        );
      }
    }
    
    class SFShowData02 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        int counter = SFCounterWidget.of(context).counter;
        return Card(
          color: Colors.green,
          child: Text("当前计数: $counter"),
        );
      }
    }
    
    • 上述代码的关系网如下所示:
    image.png
    • SFCounterWidget是共享数据,继承自InheritedWidget,内部提供初始化构造方法SFCounterWidget({this.counter, Widget child}) : super(child:child),其中可选参数child是共享数据的子节点;
    • 静态方法,实现如下:
    static SFCounterWidget of(BuildContext ctx) {
        //沿着Element树 去找到最近的SFCounterWidgetElement,
        //然后从element中取出widget对象
        return ctx.dependOnInheritedWidgetOfExactType();
      }
    
    • 根据BuildContext,也就是child子节点widget(SFShowData01与SFShowData02)的element,在Element树 去找到最近的SFCounterWidgetElement,然后从element中取出widget对象SFCounterWidget,也就是共享数据;
    • 实现父类的抽象方法updateShouldNotify
    @override
      bool updateShouldNotify(SFCounterWidget oldWidget) {
        return oldWidget.counter != counter;
      }
    
    • 返回true,就表示共享数据SFCounterWidget内部子节点widget(获取数据的组件)的state类 就会执行void didChangeDependencies()方法;
    Provider
    • Provider是官方推荐的全局状态管理工具,使用之前我们需要引入对它的依赖:
    dependencies:
      provider: ^4.0.4
    
    • Provider的使用步骤通常分为下面三步:

      • 第一步:创建需要共享的数据模型继承自ChangeNotifier;
      • 第二步:在应用程序顶层包装一个ChangeNotifierProvider
      • 第三步:更改共享数据模型中的数据,发出通知,给观察者;
      • 第四步:观察者 在引用共享数据的位置,使用数据,刷新界面
    • 在引用数据的位置,使用共享数据,通常有三种形式,分别为:Provider.ofConsumerSelector,下面分别介绍这三种形式的用法与优缺点;

    Provider.of的使用
    • 第一步:创建的共享数据模型SFCounterViewModel继承自ChangeNotifier
    import 'package:flutter/material.dart';
    
    //创建共享数据模型
    class SFCounterViewModel extends ChangeNotifier{
      int _counter = 1000;
    
      int get counter => _counter;
    
      set counter(int value) {
        _counter = value;
        notifyListeners();
      }
    }
    
    • 第二步:应用程序顶层包装ChangeNotifierProvider组件,并传入刚定义的共享数据模型;
    import 'package:flutter/material.dart';
    import 'package:learn_flutter_01/day02/viewmodel/SFCounterViewModel.dart';
    import 'package:provider/provider.dart';
    
    void main() {
      //2.在应用程序的顶层 包装一个ChangeNotifierProvider
      runApp(
        ChangeNotifierProvider(
          create: (ctx) => SFCounterViewModel(),
          child: SFMyApp(),
        )
      );
    }
    
    • 第三步:更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法;
      • context.read<SFCounterViewModel>().counter+=1是Provider库中对context扩展了一个read方法,其本质是调用Provider.of<SFCounterViewModel>(context, listen: false).counter+=1,其中listen参数默认为true,我们需要改成false,否则会报错,这个参数是在Provider 4.0.2后会出现的;
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SFHomePage(),
        );
      }
    }
    
    class SFHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        print("SFHomePage build");
        return Scaffold(
            appBar: AppBar(
              title: Text("商品列表"),
            ),
            body: Column(
              children: [
                SFShowData01()
              ],
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: (){
                ///更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法
                context.read<SFCounterViewModel>().counter+=1;
                ///Provider.of<SFCounterViewModel>(context, listen: false).counter+=1;
              },
              child: Icon(Icons.add),
            )
        );
      }
    }
    
    • 第四步:通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据,刷新界面;
    ///子组件一
    class SFShowData01 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        print("SFShowData01 build");
        ///通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据
        int counter = Provider.of<SFCounterViewModel>(context).counter;
        return Card(
          color: Colors.red,
          child: Text("当前计数: $counter"),
        );
      }
    }
    
    • 效果图如下所示:
    image.png
    • 当用户点击右下方的按钮时,Provider.of所在的widget SFShowData01的build方法有调用,会出现SFShowData01的重建,效率略低
    Consumer的使用
    • 第一,二,三步与Provider.of的内容完全相同,不同点在于第四步,引用共享数据刷新界面时,使用Consumer,代码如下:
    class SFShowData01 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        print("SFShowData01 build");
        ///通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据
        return Card(
            color: Colors.red,
            child: Consumer<SFCounterViewModel>(
              builder: (ctx, viewModel, child) {
                return Text("当前计数: ${viewModel.counter}");
              }
            )
        );
      }
    }
    
    • 发现使用Consumer引用共享数据时,SFShowData01的build方法没有调用,不会出现SFShowData01的重建,效率效率比Provider.of相对较高;
    selector的使用
    • 首先上案例代码,如下所示:
    • 共享数据模型SFCounterViewModel,内部有两个属性值_counter与_number;
    import 'package:flutter/cupertino.dart';
    
    class SFCounterViewModel extends ChangeNotifier {
    
      int _counter = 1000;
      int _number = 50;
    
      int get counter => _counter;
    
      set counter(int value) {
        _counter = value;
        ///发送通知 给观察者
        notifyListeners();
      }
    
      int get number => _number;
    
      set number(int value) {
        _number = value;
    
        notifyListeners();
      }
    }
    
    • 界面构建如下:
    import 'package:SFLayout/provider/counter_view_model.dart';
    import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    
    main() {
      runApp(
          ///App顶层包装ChangeNotifierProvider组件
          ChangeNotifierProvider(
        create: (context) => SFCounterViewModel(),
        child: MyApp(),
      ));
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SFHomePage(),
        );
      }
    }
    
    class SFHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        print("SFHomePage build");
        return Scaffold(
            appBar: AppBar(
              title: Text("商品列表"),
            ),
            body: Column(
              children: [
                SFShowData01(),
                SFShowData02()
              ],
            ),
            floatingActionButton: FloatingActionButton(
               onPressed: () {
                 ///更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法
                 Provider.of<SFCounterViewModel>(context,listen: false).counter+=1;
                 // context.read<SFCounterViewModel>().counter+=1;
               },
               child: Icon(Icons.add),
            )
        );
      }
    }
    
    ///子组件一
    class SFShowData01 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        print("SFShowData01 build");
        ///通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据
        return Card(
            color: Colors.red,
            child: Consumer<SFCounterViewModel>(
              builder: (ctx, viewModel, child) {
                print("counter");
                return Text("当前计数counter: ${viewModel.counter}");
              }
            )
        );
      }
    }
    
    class SFShowData02 extends StatelessWidget {
      const SFShowData02({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return  Card(
            color: Colors.green,
            child: Consumer<SFCounterViewModel>(
                builder: (ctx, viewModel, child) {
                  print("number");
                  return Text("当前计数number: ${viewModel.number}");
                }
            )
        );
      }
    }
    
    • 效果图如下:
    image.png
    • 当点击右下角的按钮时,我们只改变了SFCounterViewModel的_counter值,但是SFShowData01与SFShowData02都会去刷新数据,也就是说只要SFCounterViewModel的内部属性发生变化,所有的观察者都会执行回调,刷新数据,如何实现针对共享数据模型的特定属性,进行监测,实现更精细化的监听回调,答案是使用selector,代码改造如下:
    import 'package:SFLayout/provider/counter_view_model.dart';
    import 'package:flutter/material.dart';
    import 'package:provider/provider.dart';
    
    main() {
      runApp(
          ///App顶层包装ChangeNotifierProvider组件
          ChangeNotifierProvider(
        create: (context) => SFCounterViewModel(),
        child: MyApp(),
      ));
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: SFHomePage(),
        );
      }
    }
    
    class SFHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        print("SFHomePage build");
        return Scaffold(
            appBar: AppBar(
              title: Text("商品列表"),
            ),
            body: Column(
              children: [
                SFShowData01(),
                SFShowData02()
              ],
            ),
            floatingActionButton: FloatingActionButton(
               onPressed: () {
                 ///更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法
                 Provider.of<SFCounterViewModel>(context,listen: false).counter+=1;
                 // context.read<SFCounterViewModel>().counter+=1;
               },
               child: Icon(Icons.add),
            )
        );
      }
    }
    
    ///子组件一
    class SFShowData01 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        print("SFShowData01 build");
        ///通知回调 更新数据 本质是调用共享数据模型的getter方法 获取数据
        return Card(
            color: Colors.red,
            child: Consumer<SFCounterViewModel>(
              builder: (ctx, viewModel, child) {
                print("counter");
                return Text("当前计数counter: ${viewModel.counter}");
              }
            )
        );
      }
    }
    
    class SFShowData02 extends StatelessWidget {
      const SFShowData02({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return  Card(
            color: Colors.green,
            child: Selector<SFCounterViewModel,int>(
              selector: (ctx,viewModel) => viewModel.number,
              builder: (ctx,numberValue,child) {
                print("number");
                return Text("当前计数number: ${numberValue}");
              },
            )
        );
      }
    }
    
    • SFShowData01监听SFCounterViewModel的counter属性,SFShowData02监听SFCounterViewModel的number属性,当点击右下角按钮只改变counter属性时,现在只有SFShowData01执行回调,刷新数据,满足需求;
    多个数据模型的共享
    • 可使用MultiProvider组件;
    • 再新建一个共享数据模型SFUserInfoViewModel,其数据来源于模型SFUserInfoModel
    class SFUserInfoModel {
      String name;
      int level;
      String imageUrl;
    
      SFUserInfoModel(this.name,this.level,this.imageUrl);
    }
    
    import 'package:flutter/material.dart';
    import 'package:learn_flutter_01/day02/model/SFUserInfoModel.dart';
    
    class SFUserInfoViewModel extends ChangeNotifier {
      SFUserInfoModel _userInfo;
    
      SFUserInfoViewModel(this._userInfo);
    
      SFUserInfoModel get userInfo => _userInfo;
    
      set userInfo(SFUserInfoModel value) {
        _userInfo = value;
        notifyListeners();
      }
    }
    
    • 案例代码如下所示:
    import 'package:flutter/material.dart';
    import 'package:learn_flutter_01/day02/model/SFUserInfoModel.dart';
    import 'package:learn_flutter_01/day02/viewmodel/SFCounterViewModel.dart';
    import 'package:learn_flutter_01/day02/viewmodel/SFUserInfoViewModel.dart';
    import 'package:provider/provider.dart';
    
    void main() {
      runApp(
        MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (ctx) => SFCounterViewModel()),
            ChangeNotifierProvider(create: (ctx) => SFUserInfoViewModel(SFUserInfoModel("yanzi",20,"haha"))),
          ],
          child: SFMyApp(),
        )
      );
    }
    
    class SFMyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: SFHomePage(),
        );
      }
    }
    
    class SFHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        print("SFHomePage build");
        return Scaffold(
          appBar: AppBar(
            title: Text("商品列表"),
          ),
          body: Column(
            children: [
              SFShowData01(),
              SFShowData02(),
              SFShowData03(),
            ],
          ),
          floatingActionButton: FloatingActionButton(
               onPressed: () {
                 ///更改共享数据模型中的数据 发送通知 本质是调用共享数据模型的setter方法
                 // Provider.of<SFCounterViewModel>(context,listen: false).counter+=1;
                 context.read<SFCounterViewModel>().counter+=1;
               },
               child: Icon(Icons.add),
            )
        );
      }
    }
    
    class SFShowData01 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    
        print("SFShowData01 build");
    
        //3.在需要使用共享数据的位置调用Provider.of方法
        int counter = Provider.of<SFCounterViewModel>(context).counter;
        return Card(
          color: Colors.red,
          child: Text("当前计数: $counter",style: TextStyle(fontSize: 25)),
        );
      }
    }
    
    class SFShowData02 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        //int counter = Provider.of<SFCounterViewModel>(context).counter;
        print("SFShowData02 build");
        return Card(
          color: Colors.green,
          child: Consumer<SFCounterViewModel> (
            builder: (ctx,counterViewModel,child) {
              print("Consumer builder");
              return Text("当前计数: ${counterViewModel.counter}",style: TextStyle(fontSize: 25));
            },
          )
        );
      }
    }
    
    class SFShowData03 extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Consumer2<SFCounterViewModel,SFUserInfoViewModel>(
            builder: (ctx,countViewModel,userInfoViewModel,child){
              return Text(
                  "nickname=${userInfoViewModel.userInfo.name} counter = ${countViewModel.counter}",
                  style: TextStyle(fontSize: 25)
              );
            }
        );
      }
    }
    
    • SFShowData01中,利用Provider.of监听SFCountViewModel数据;
    • SFShowData02中,利用Consumer监听SFCountViewModel数据;
    • SFShowData03中,利用Consumer2<A,B>同时监听SFCountViewModelSFUserInfoViewModel两种共享数据,运行效果图如下:
    • 同理Consumer3<A,B,C>可同时监听三种共享数据模型,最多可监听6种共享数据模型;
    image.png

    相关文章

      网友评论

          本文标题:Flutter入门13 -- 状态管理

          本文链接:https://www.haomeiwen.com/subject/epnialtx.html