Flutter 状态管理的实现

一、什么是状态管理

大到整个app的状态,用户使用app是登录状态,还是游客状态;小到一个按钮的状态,按钮是点击选中状态还是未点击状态等等,这些都是状态管理。

二、命令式编程和声明式编程状态管理的区别

iOS是如何管理状态的,一般都是获取这个控件然后设置你想要的状态 当你的 Flutter 应用的状态发生改变时(例如,用户在设置界面中点击了一个开关选项)你改变了状态,这将会触发用户界面的重绘。去改变用户界面本身是没有必要的(例如 widget.setText )—你改变了状态,那么用户界面将重新构建。

三、状态管理中的声明式编程思维

Flutter 应用是 声明式 的,这也就意味着 Flutter 构建的用户界面就是应用的当前状态。

一旦你的界面状态发生改变,就会触发界面的重新绘制,绘制出你想要的界面,而不是像iOS的OC语言那样去获取需要改变状态的控件,然后修改它

四、短时 (ephemeral) 和应用 (app) 状态的区别

Flutter中的状态管理又分为短时状态和应用状态。

短时状态,就是在单个页面需要保持的状态,比如页面数据加载到了第几页,关注按钮是已关注还是未关注等,都是在单个页面需要保持的状态。widget树中其他部分不需要访问这种状态。不需要去序列化这种状态,这种状态也不会以复杂的方式改变。换句话说,不需要使用状态管理架构(例如 ScopedModel, Redux)去管理这种状态。你需要用的只是一个 StatefulWidget。

在下方你可以看到一个底部导航栏中当前被选中的项目是如何被被保存在 _MyHomepageState 类的 _index 变量中。在这个例子中,_index 是一个短时状态。

class MyHomepage extends StatefulWidget {
 @override
 _MyHomepageState createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
 int _index = 0;

 @override
 Widget build(BuildContext context) {
  return BottomNavigationBar(
   currentIndex: _index,
   onTap: (newIndex) {
    setState(() {
     _index = newIndex;
    });
   },
   // ... items ...
  );
 }
}

在这里,使用 setState() 和一个变量就能达到管理状态的目的。你的 app 中的其他部分不需要访问 _index。这个变量只会在 MyHomepage widget 中改变。而且,如果用户关闭并重启这个 app,_index会被重置而不会继续保持原来的状态。

应用状态,如果你想在你的应用中的多个部分之间共享一个非短时的状态,并且在用户会话期间保留这个状态,我们称之为应用状态(有时也称共享状态)。 应用状态的一些例子:

1、用户选项

2、登录信息

3、一个社交应用中的通知

4、一个电商应用中的购物车

5、一个新闻应用中的文章已读/未读状态

五、共享状态管理

在 Flutter 中,一般是将存储状态的对象置于 widget 树中对应 widget 的上层,当它发生改变的时候,它对应的widget会从上层开始重构。因为这个机制,所以 widget 无需考虑生命周期的问题—它只需要针对 上层存储数据的对象 声明所需显示内容即可。当内容发生改变的时候,旧的 widget 就会消失,完全被新的 widget 替代。 Flutter原生提供了两个方法来管理共享状态:

5.1 --InheritedWidget

class ADCounterWidget extends InheritedWidget {
 // 1. 共享的数据
 final int counter;

 // 2. 定义构造方法
 ADCounterWidget({this.counter, Widget child}): super(child: child);

 // 3. 找到当前Widget树中最近的InheritedWidget
 static ADCounterWidget of(BuildContext context) {
  // 沿着Element树, 去找到最近的ADCounterElement, 从Element中取出Widget对象
  return context.dependOnInheritedWidgetOfExactType();
 }

 // 4. 要不要回调State中的didChangeDependencies方法
 @override
 bool updateShouldNotify(ADCounterWidget oldWidget) {
  return oldWidget.counter != counter;
 }
}

上面定义了一个of方法,该方法通过context开始去查找父级的HYDataWidget

updateShouldNotify方法是对比新旧HYDataWidget,是否需要对更新相关依赖的Widget

class HYHomePage extends StatefulWidget {
 @override
 _HYHomePageState createState() => _HYHomePageState();
}

class _HYHomePageState extends State<HYHomePage> {
 int data = 100;

 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text("InheritedWidget"),
   ),
   body: HYDataWidget(
    counter: data,
    child: Center(
     child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
       HYShowData()
      ],
     ),
    ),
   ),
   floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
     setState(() {
      data++;
     });
    },
   ),
  );
 }
}

创建HYDataWidget,并且传入数据(这里点击按钮会修改数据,并且出发重新build)

5.2 --Provider

Provider库有三个主要用到的类:

  • ChangeNotifier:真正数据(状态)存放的地方
  • ChangeNotifierProvider:Widget树中提供数据(状态)的地方,会在其中创建对应的ChangeNotifier
  • Consumer:Widget树中需要使用数据(状态)的地方

第一步 在程序的最顶层创建自己的ChangeNotifier

  • 将ChangeNotifierProvider放到了顶层,这样方便在整个应用的任何地方可以使用CounterProvider
  • 在ChangeNotifier中创建一个私有的_counter,并且提供了getter和setter
  • 在setter中我们监听到_counter的改变,就调用notifyListeners方法,通知所有的Consumer进行更新
void main() {
 runApp(ChangeNotifierProvider(
  create: (context) => CounterProvider(),
  child: MyApp(),
 ));
}

class CounterProvider extends ChangeNotifier {
 int _counter = 100;
 intget counter {
  return _counter;
 }
 set counter(int value) {
  _counter = value;
  notifyListeners();
 }
}

第二步 在首页中使用Consumer引入和修改状态

  • 在body中使用Consumer,Consumer需要传入一个builder回调函数,当数据发生变化时,就会通知依赖数据的Consumer重新调用builder方法来构建
  • 在floatingActionButton中使用Consumer,当点击按钮时,修改CounterNotifier中的counter数据
class HYHomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text("列表测试"),
   ),
   body: Center(
    child: Consumer<CounterProvider>(
     builder: (ctx, counterPro, child) {
      return Text("当前计数:${counterPro.counter}", style: TextStyle(fontSize: 20, color: Colors.red),);
     }
    ),
   ),
   floatingActionButton: Consumer<CounterProvider>(
    builder: (ctx, counterPro, child) {
     return FloatingActionButton(
      child: child,
      onPressed: () {
       counterPro.counter += 1;
      },
     );
    },
    child: Icon(Icons.add),
   ),
  );
 }
}

Consumer的builder方法有三个参数:

  • context,每个build方法都会有上下文,目的是知道当前树的位置
  • ChangeNotifier对应的实例,也是我们在builder函数中主要使用的对象
  • child,目的是进行优化,如果builder下面有一颗庞大的子树,当模型发生改变的时候,我们并不希望重新build这颗子树,那么就可以将这颗子树放到Consumer的child中,在这里直接引入即可(注意我案例中的Icon所放的位置)

第四步 创建一个新的页面,在新的页面中修改数据

class SecondPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title: Text("第二个页面"),
   ),
   floatingActionButton: Consumer<CounterProvider>(
    builder: (ctx, counterPro, child) {
     return FloatingActionButton(
      child: child,
      onPressed: () {
       counterPro.counter += 1;
      },
     );
    },
    child: Icon(Icons.add),
   ),
  );
 }
}

到此这篇关于Flutter 状态管理的实现的文章就介绍到这了,更多相关Flutter 状态管理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-06-14

Flutter部件内部状态管理小结之实现Vue的v-model功能

Flutter部件内部状态管理 本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能. widget 基础 widget(部件) 如 React 里万物皆组件, Java 里万物皆对象, Flutter 里,能看到的一切都是 widget(部件),如按钮.文本框等等. Flutter 内部已经为我们做了一些基础的 widget ,例如: Text : 这个就是一个文本部件,里面用于放置文本 Row , C

说说如何使用Vuex进行状态管理(小结)

1 为什么需要状态管理 一个 Vue 组件分为数据(model)与视图(view).当通过 methods 中的方法更新数据时,视图也会自动更新. message.vue <template> <div> {{message}} <button @click="changeMessage">改变内容</button> </div> </template> <script> export default

PHP使用者状态管理功能的应用

使用者状态管理(session support)是 PHP 4.0 一个让大家期待已久的新功能.在 PHP 3.0 的时代,程序设计员必须使用其它人写好的函式库来实作状态管理功能,或者就干脆放弃这项功能不用算了.而状态管理功能的缺乏事实上是 PHP 3.0 最让人感到失望的地方之一.不过现在状况已经得到改变,从 PHP 4.0 的早期测试版开始,使用者状态管理便已经成为 PHP 内建的功能之一了. 你可以使用状态管理功能来管理使用者从进入网站开始一直到离开网站为止这段期间内的所有相关变量(只要使

Vue的Flux框架之Vuex状态管理器

学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 React 里面的 Redux 的状态管理器,用来管理Vue的所有组件状态. 为什么使用Vuex? 当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态. 遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理

ASP.NET2.0服务器控件之自定义状态管理

在前面的系列文章中,我们曾经介绍了视图状态和控件状态的基本概念和典型应用,从中可以发现,视图状态和控件状态对于自定义服务器控件实现的重要性.本文将继续这一主题,重点介绍实现视图状态和控件状态自定义管理的方法. 自定义视图状态管理 在介绍视图状态时,我们曾经提到过:对于简单属性,例如,String.Int等类型,.NET执行引擎将自动启用默认视图状态管理机制,以便完成相应的功能.然而,如果开发人员在ViewState中保存的是自定义数据类型,或者需要实现自定义方式优化视图状态管理时,则必须实现自定

详解vuex状态管理模式

一.前言 本次接受一个BI系统,要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化,这一个系统为了接入公司自身的产品,后端技术采用spring boot,前端采用vue+vuex+axios的项目架构方式,vuex作为vue的状态管理,是尤为重要的部分.这里,我将vuex如何运作和使用做一次总结,有错的地方,望多多提点. 二.vuex简单使用 安装vuex cnpm install vuex --save 在src目录下建立文件夹,命名为store,建立index.js 如图

Vue的状态管理vuex使用方法详解

引入vuex 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) 现在当 sourceOfTruth 发生变化,vmA 和 vmB 都将自动的更新引用它们的视图.子组件们的每个实例也会

40行代码把Vue3的响应式集成进React做状态管理

前言 vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中. 如果我们想把它集成到React中,可行吗?来试一试吧. 使用示例 话不多说,先看看怎么用的解解馋吧. // store.ts import { reactive, computed, effect } from '@vue/reactivity'; export const state = reactive({ count:

JSP状态管理的简单介绍

JSP状态管理的简单介绍 一 http协议的无状态性 无状态性是指:当浏览器发送请求给服务器时,服务器响应客户端请求. 但是当同一个浏览器再次发送请求给服务器的时候,服务器并不知道它就是刚才那个浏览器. 简单地说,就是服务器不会去记得你,所以就是无状态协议. 二 保存用户状态的两大机制 Session Cookie 三 Cookie概述 Cookie:中文名称为"小甜饼",是Web服务器保存在客户端的一系列文本信息. 典型应用一:判断注册用户是否已经登录网站. 典型应用二:"