[译] Flutter 中的原生应用程序状态

最新推荐文章于 2024-09-02 21:23:48 发布

erthre

最新推荐文章于 2024-09-02 21:23:48 发布

阅读量749

点赞数 24

分类专栏： Android程序员文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/erthre/article/details/136787768

版权

Android程序员专栏收录该内容

11 篇文章 0 订阅

订阅专栏

_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();
}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。