class Provider extends StatelessWidget {
const Provider({this.data, this.child});
final data;
final child;
@override
Widget build(BuildContext context) => child;
}
是的,直截了当。现在我们将 “Provider” 导入 “main.dart”
import ‘package:flutter/material.dart’;
import ‘package:myapp/Provider.dart’;
重建我们应用程序,以检查所有的工作是否有错。如果全部“运行”,那我们就可以进行下一步了。我们现在有了一个用于应用程序状态的容器,我们可以返回如何从这个容器中检索数据的问题。幸运的是,Flutter 已经有了解决方案,而且它是 “InheritedWidget”。这些文档已经说得很清楚了:
用于在树中有效传播信息的小部件的基类。
这正是我们所需要的。我们创建“继承”小部件。
打开 “Provider.dart”,然后创建私有 “_InheritedProvider
” 小部件:
class _InheritedProvider extends InheritedWidget {
_InheritedProvider({this.data, this.child
})
: super(child: child);
final data;
final child;
@override
bool updateShouldNotify(_InheritedProvider oldWidget) {
return data != oldWidget.data;
}
}
“InheritedWidget” 的所有子类都应该实现 “updateShouldNotify” 方法。此时,我们只需检查传递的 “data” 是否已更改。例如,当我们将计数器从 “0” 改为 “1” 时,该方法应该返回 “true”。
我们现在讲“继承”小部件,然后添加到小部件树中:
class Provider extends StatelessWidget {
…
@override
Widget build(BuildContext context) {
return new _InheritedProvider(data: data, child: child);
}
…
}
好的,我们现在有了小部件,它在小部件树中传播数据,但我们应该创建一个公有方法,它允许 get 这个数据:
class Provider extends StatelessWidget {
…
static of(BuildContext context) {
_InheritedProvider p =
context.inheritFromWidgetOfExactType(_InheritedProvider);
return p.data;
}
…
}
“inheritFromWidgetOfExactType” 方法获取 “_InheritedProvider” 类型实例的最近父部件。
我们现在有了解决第一个问题的能力:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Provider(
data: 0,
…
}
…
}
…
class MyHomePage extends StatelessWidget {
…
Widget build(BuildContext context) {
var _counter = Provider.of(context);
…
}
我们删除了全局变量 “_counter” 并使用 “Provider.of” 在 “MyHomePage” 小部件中取得了 “counter”。如你所见,我们没有将它作为参数传递给 “MyHomePage”,而是使用 “Provider.of” 来获取应用程序的状态,他可以应用于树下的任何小部件。 此外,“Provider.of” 还包括当前小部件的上下文和重建,并在更改 “_InheritedProvider
” 小部件时对其进行注册。
现在是时候检测我们的应用程序是否起作用了:我们重新加载它。为了确保我们的 “Provider” 正常工作,我们可以将 “data” 从 “0” 更改为 “MyApp” 小部件中的 “1”,然后我们必须重新加载应用程序。然而,我们的 “+” 按钮仍然无法工作。
在这里,我们面临的第二个问题是“如何在改变应用程序的状态后重建小部件”,现在我们应该重新开始思考。
我们的应用程序状态只是一个数字,但当这个数字被更改时,检测起来就没有那么容易了。如果我们将“计数器”编号包装成一个“可观察的”对象,该对象将跟踪更改并通知“监听器”这些更改。
庆幸的是,Flutter 已经有了解决方案,这就是 “ValueNotifier”。像通常一样,这里有一个很好的文档解释:
当 value 被替代时,这个类会通知它的监听器。
好的,让我们在 “mian.dart” 中创建应用程序的状态类:
import ‘package:flutter/material.dart’;
import ‘package:myapp/Provider.dart’;
class AppState extends ValueNotifier {
AppState(value) : super(value);
}
var appState = new AppState(0);
然后将其传递给 “Provider”
Widget build(BuildContext context) {
return new Provider(
data: appState,
由于 “data” 包含一个对象,所以我们更改 “Provider.of(context)” 用法,那就这样做:
Widget build(BuildContext context) {
var _counter = Provider.of(context).value;
重建我们的应用程序,并确保没有错误。
我们现在已经实现了 “_incrementCounter
”:
floatingActionButton: new FloatingActionButton(
onPressed: () => _incrementCounter(context),
tooltip: ‘Increment’,
child: new Icon(Icons.add),
),
);
}
_incrementCounter(context) {
var appState = Provider.of(context);
appState.value += 1;
}
我们重新加载了应用程序,并尝试按下 “+” 按钮。没有改变什么。但如果我们允许“热加载”,我们将看到文本已经改变。这是因为我们按下按钮后改变了应用程序的状态。但我们在屏幕上看到了旧的状态,因为我们还没有重新构建小部件。当我们允许小部件进行“热加载”时,我们就可以看到屏幕上的实际状态。
最后的挑战是在我们更改应用程序的状态后重建小部件。但在此之前,我们看看已有的东西:
- “Provider” —— 我们应用程序状态的容器
- “AppState” —— 跟踪应用程序状态改变并通知“监听者”的类
- “_InheritedProvider” —— 小部件将有效地将应用程序状态传播到网上,并在改变了自己的状态之后重建用户。
首先,我们回顾一下 “_InheritedProvider” 的 “updateShouldNotify” 方法:
@override
bool updateShouldNotify(_InheritedProvider oldWidget) {
return data != oldWidget.data;
}
现在 “data” 等于 “AppState” 的实例,这意味着我们在 “_incrementCounter
” 方法中更改此实例的 “value” 时,它实际上并不会改变实例本身。因此,这个比较总是返回 “false”。我们通过比较 “value”-s 来解决这个问题。但为此,我们应该将“值”曝出在小部件中,这允许我们可以不丢失重构之间的 “value”:
class _InheritedProvider extends InheritedWidget {
_InheritedProvider({this.data, this.child})
: _dataValue = data.value,
super(child: child);
final data;
final child;
final _dataValue;
@override
bool updateShouldNotify(_InheritedProvider oldWidget) {
return _dataValue != oldWidget._dataValue;
}
}
现在它可以正确地工作了:当我们改变状态值时,小部件会重新构建消费者。但在重新构建消费者之前,我们应该在改变应用程序的状态后重建小部件本身。
我们的代码中只有一个可以了解 “_InheritedProvider” 的小部件,就是 “Provider” 小部件。如果我们想要跟踪小部件中的某种状态,我们应该创建 “statefull” 小部件。好的,让我们将 “Provider” 小部件从 “stateless” 转换为 “statefull”:
class Provider extends StatefulWidget {
const Provider({this.child, this.data});
static of(BuildContext context) {
_InheritedProvider p =
context.inheritFromWidgetOfExactType(_InheritedProvider);
return p.data;
}
final ValueNotifier data;
final Widget child;
@override
State createState() => new _ProviderState();
}
class _ProviderState extends State {
@override
Widget build(BuildContext context) {
return new _InheritedProvider(
data: widget.data,
ride
State createState() => new _ProviderState();
}
class _ProviderState extends State {
@override
Widget build(BuildContext context) {
return new _InheritedProvider(
data: widget.data,