美文网首页
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.of，Consumer与Selector，下面分别介绍这三种形式的用法与优缺点；

    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>同时监听SFCountViewModel与SFUserInfoViewModel两种共享数据，运行效果图如下：
    • 同理Consumer3<A,B,C>可同时监听三种共享数据模型，最多可监听6种共享数据模型；
    image.png

    相关文章

      网友评论

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

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Flutter入门13 -- 状态管理|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！