在本节中,无涯教程将讨论状态管理以及如何在Flutter中处理状态管理。无涯教程知道在Flutter中,一切都是小部件。小部件可以分为两类,一类是无状态小部件,另一类是有状态小部件。无状态窗口小部件没有任何内部状态。这意味着,一旦构建完成,无涯教程将无法对其进行更改或修改,除非它们再次被初始化。另一方面,有状态窗口小部件是动态的并且具有状态。这意味着无涯教程可以在其整个生命周期中轻松修改它,而无需再次对其进行初始化。
状态(state)是在构建窗口小部件时可以读取的信息,并且可能会在应用程序的整个生命周期内进行更改。如果要更改窗口小部件,则需要更新状态对象,这可以通过使用有状态窗口小部件(Stateful widgets)可用的 setState()函数来完成。 setState()函数允许无涯教程设置触发UI重绘的状态对象的属性。
状态管理(state management)是应用程序生命周期中最流行和必需的过程之一。根据官方文档,Flutter是声明性的。这意味着Flutter通过反映您应用的当前状态来构建其UI。下图更清楚地说明了可以从应用程序状态构建UI的位置。
让无涯教程以一个简单的例子来了解状态管理的概念。假设您已经在应用程序中创建了客户(customers)或产品(products)列表。现在,假设您已在该列表中动态添加了新客户或产品。然后,需要刷新列表以查看新添加到记录中的项目。因此,无论何时添加新项目,都需要刷新列表。这种类型的编程需要状态管理来处理这种情况以提高性能。这是因为每次您进行更改或更新时,状态都会刷新。
在 flutter 中,状态管理分为两个概念类型,如下所示:
此状态也称为UI状态或本地状态。这是一种与特定窗口小部件相关的状态,或者可以说它是包含在单个窗口小部件中的状态。在这种状态下,您无需使用状态管理技术。此状态的常见示例是“Text Field”。
示例
class MyHomepage extends StatefulWidget { @override MyHomepageState createState() => MyHomepageState(); } class MyHomepageState extends State<MyHomepage> { String _name = "Peter"; @override Widget build(BuildContext context) { return RaisedButton( child: Text(_name), onPressed: () { setState(() { _name = _name == "Peter" ? "Learnfk" : "Peter"; }); }, ); } }。
在上面的示例中, _name 是短暂状态。在这里,只有StatefulWidget的类中的setState()函数可以访问 _name 。构建方法调用setState()函数,该函数对状态变量进行修改。执行此方法时,小部件对象将替换为新的小部件对象,该对象将提供修改后的变量值。
它与短暂状态不同。这是一种状态,无涯教程希望在应用程序的各个部分之间共享,并且希望保持用户会话之间的状态。因此,这种类型的状态可以全局使用。有时也称为应用程序状态或共享状态。
下图更恰当地说明了短暂状态和应用程序状态之间的区别。
可以使用提供程序包学习最简单的应用程序状态管理示例。提供者的状态管理很容易理解,并且需要更少的编码。提供者是第三方库。在这里,无涯教程需要了解使用此库的三个主要概念。
ChangeNotifier是一个简单的类,它向其侦听器提供更改通知。对于少量的听众来说,它很容易理解,实现和优化。它用于侦听器观察变化的模型。在这种情况下,无涯教程仅使用notifyListener()方法来通知侦听器。
例如,让无涯教程基于ChangeNotifier定义一个模型。在此模型中,使用ChangeNotifier扩展了Counter,该计数器用于在无涯教程调用notifyListeners()时通知其侦听器。这是唯一需要在ChangeNotifier模型中实现的方法。在此示例中,无涯教程声明了两个函数:increment和decrement,分别用于增大和减小该值。每当模型更改时,无涯教程都可以以可能更改应用程序UI的方式调用notifyListeners()方法。
import 'package:flutter/material.dart'; class Counter with ChangeNotifier { int _counter; Counter(this._counter); getCounter() => _counter; setCounter(int counter) => _counter = counter; void increment() { _counter++; notifyListeners(); } void decrement() { _counter--; notifyListeners(); } }
ChangeNotifierProvider是向其子部件提供ChangeNotifier实例的窗口小部件。以下代码段有助于理解ChangeNotifierProvider的概念。
在这里,无涯教程定义了一个构建器,该构建器将创建Counter模型的新实例。除非有必要,否则ChangeNotifierProvider不会重建Counter。当不再需要该实例时,它还将自动在Counter模型上调用dispose() 方法。
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.indigo, ), home: ChangeNotifierProvider<CounterModel>( builder: (_) => CounterModel(), child: CounterView(), ), ); } }
如果需要提供多个类,则可以使用MultiProvider。 MultiProvider是在其范围内使用不同提供程序的列表。如果不使用它,无涯教程将必须嵌套无涯教程的提供者,而其中一个是另一个的子部件。无涯教程可以从下面的代码中了解这一点。
void main() { runApp( MultiProvider( providers: [ ChangeNotifierProvider(builder: (context) => Counter()), Provider(builder: (context) => SomeOtherClass()), ], child: MyApp(), ), ); }
这是一种提供者,不做任何其它的工作。它只是在新的小部件中调用提供程序,并将其构建实现委派给构建器。以下代码对其进行了更清晰的解释
return Consumer<Counter>( builder: (context, count, child) { return Text("Total price: ${count.total}"); }, );
在上面的示例中,您可以看到consumer widget仅需要一个构建器函数,只要ChangeNotifier发生更改,就会调用该函数。 builder函数包含三个参数,分别是context,count和child。第一个参数,context,包含在每个build()方法中。第二个参数是ChangeNotifier的实例,第三个参数是用于优化的子部件。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)