这是我参加8月更文应战的第3天，活动概况检查：8月更文应战

本文首要内容翻译自 Flutter 官方文档：Simple app state management，情分页况处理系列文章会比较多，先从官方分页查询sql句子的示例文档开端，能够更好地了解状况处理的概念。

前语

声明式 UI 程分页符序的首要特征是 UI 界面的实践制造和声明界面的代码是别离的。自己刚触摸 Flutter 的时分就很不适应，曾经 iOS 写个文本控件，修改文字内容时直接修改 UIText 的 te分页符怎样删去xt 特点即可，可是关于 Flutter 而言，swift代码Text组件的内容初始化之后不能够直接修改，而是需ios15求经过状况处理更改数据后再触发对应的办法从头构建 UI 界面（典型的便是调用 setState办法触发 build）。这也是现ios8备忘录代照应式结构的特征，像 React，Vue，SwiftUI 都是相似的思路。

因为数据和界面别离，使得代码的事务逻swiftui下拉刷新辑更明晰，也易于封装和共用。状况分页预览怎样封闭处理成为了中心事务所在，因而非常分页符怎样参加重要。

购物车示例

为了演示状况处理，咱们以简略的购物车为例。咱们的运用有两个独立的页面swiftcode是什么意思中文：产品列表（GoodsList）和购物车（MyCart）。事务逻辑也很简略:

  • 从产品列表点击增加按钮时就把产品增加到购物车
  • 从购物车页面iOS能够看到现已增加进去的产品。
  • 产品列表的产品假定现已参加到了购物车就打勾，appearance不再允许重复参加。

为了简化事务逻辑，这儿没有结束产品修改数量和购物车的移除产品功用。运用的组件结构如下图所application示。

Flutter 入门与实战（四十）：以购物车为例初探状况办理 | 8月更文应战

这儿咱们就会有一个问题，咱们在哪里处理购物车的状况？是在 MyCart 中仍是其他地方？

状况处理前进

在 Flutter 中，将状况处理置于运用状况的组ios15件的上层会愈加合理。这是因为，像 Flutter 这样的声明式结构，假定要改动 UI 界面，有必要重建组件。咱们不能经过 MyCart.updaios8备忘录teWith(somethingNew)来更新界面。换言之，咱们不swiftui有用事例能在外部调用组件的某个办法来显现地更改组件。即便是你想这么做，你得绕过结构的束缚而不是运用结构的优势。

// 糟糕的示例
void myTapHandler() {
var cartWswiftui视频idget = somehowGswiftkeyetMyCartWidget();
cartWidget.updateWith(item);
}

即便ios最好玩的手游是上面的代码能够作业，之后咱们也需求结束对应的 updateWith 办法。

// 糟糕的示例
Widget build(BuildContext context) {
retuapproachrn SomeWidget(
// 购物车的初始状况
);
}
void updateWith(Item item) {
// 更新界面的代码
}

这个代码中需求考虑 UI 的其时状况，然swiftui教程后将新的数据运用到界面上。这样很难避免 bug。
在 Flutter中swiftui有用事例，一旦界面临swiftui结构应的内容产生改动了，每次都会新构建一个组件。咱们应该运用Mswiftui快速开发appyCart(contents)来替换MyCart.updateWith(somswiftlyethingNew)办法调用这种办法。这是因为，咱们只能在组件的父节点的 build 办法构建新的组件，这就要求状况是在 MyCart 的父节点或许更上的层级中处理。

// 好的示例
void myTapHandler(swiftui结构BuildContext context) {
car cartModel = somehowGetMyCartMappleodel(context);
cartModel.add(item);
}

现在，购物车中只会有一个进口来构建 UI。

// 好的示例
Widgswiftui有用事例et build(BuilappointmentdContext context) {
var cartModel = somehowGetMyCapproachartModel(context);
return SomeWidget(
//只需求运用其时状况构建一次 UI
);
}

在这个比如中，contents 应该是在 MyApp 处理，一旦它产生了改动，运用将从上一层重建 MyCart 组件。这样的利益是，MyCart 无需生命周期处理，它只是声ios8备忘录明了怎样按 contents 来展现界面（MyCart 变成了无状况组件，界面和事务逻辑是分隔的）。当状况产生改动后，approach旧的 MyCart 组件会消失，然后用新的来替换。

Flutter 入门与实战（四十）：以购物车为例初探状况办理 | 8月更文应战

从这儿也能够看出来ios最好玩的手游为什么说组件（Widget）时不可变的，他们不会改动，而是被替换。知道在哪里处理状况了，下面咱们来看swiftui教程怎样拜访情ios体系况。

拜访状况

当用户点击产品列表的一个元素后，它将被参加购物车。可是咱们的购物车在产品元素的上一级，这个时分怎样办？
一app下载个简略的办法时给每个元素一个回调办法，当被点击后swiftcode是什么意思中文调用该办法。在 Dart 中，函数是一等政策，因而能够将函数作为参数传swiftcode是什么意思中文递。因而，在产品列表中咱们能够用代码这么结束：

@override
Widget build(BuildContext context) {
return SomeWappointmentidget(myTapCallback);
}
void myTapCallswiftui形式back(Item item) {
// 处理产品点击作业
}

这样也能正常作业，可是，假定咱们的运用ios15正式版别什么时候发布许多地方都要用到产品列表这个组件，那么咱们分页符怎样参加的产品点击处理办法会散落在各个组件中，结果很难保护（当相同的代码被重复运用2次以上时，就要考虑你分页符怎样显示出来的规划是不是有问题了）。
走运的是，Flut分页预览ter 供给了组件为下级组件（包括子组件，以及子组件的下级组件）供给数据的机制。好像 Flutter 中全部皆是组件的理念，数据传approach递也是一种特别的组件：InheritedWidget，InheritedNotifier，InheritedModel 等等。分页本篇暂时不会触及这些组件的内容，因为这些组件在更深层级结束。

这儿咱们需求插件 Provider，Provider 为咱们躲藏了深层次的数据传递组件，然后简化状况处理。分页预览Provider 的详细运用能够参阅 pub 的文档：状况处理插件 Providerapp是什么意思。后续咱们也将深化介绍 Provider插件的运用。

Provider 之 ChangeNotifier

CapplehangeNotifer 是 Flutter SDK 内置的简略类，以便向监ios模拟器听者供给改动信息。换言之，假定政策是Chaswiftcode代码查询ngeNotifier政策（承继或 mixin），那么咱们就能够订阅它的改动（其实就和观察者形式相似）。
在 Provider 中，ChangeNotifer是封装运用状况的一种办法。关于简略的运用，能够运用单个 ChangeNotifer。关于杂乱运用，会有多个模型，因而会有多个 C分页符怎样设置hangeNotifer。尽管不运用 Provider 也能运用 ChangeNotifer，可是有了 Provider，会愈加简略。
在咱们的购物车示例中，咱们能够在一个 ChangeNotiswiftui教程fer 中处理购物车的状况，因而咱们创立一个购物车模swiftui形式型类来承继 ChangeNotifier。

class CartModel extends ChangeNotifier {
final Listios体系<Item> _items = [];
UnmofiableListView<Item> get items => UnmodiableListView(_items);
int get totalPrice => _items.length * 42;
void add(Item itemswiftui结构) {
_items.add(item);
notifyListeners();
}
void removeAll() {
_items.clear();swiftui结构
notifyListeners();
}

ChangeNotifer仅有特别之处在于调用nappstoreotifyListeners办法。在模型产生改动的任何时分调用该办法可能会改写 UI 界面。而在 CaswifterrtModel 的其他代码都是本身的事务逻辑。
Chanios15geNotifier 是 flutter:foundation 的一部分，并不依赖于其他更高档的类。因而，查验起来非常简略（甚至都不需求运用组件来查验）。例如，下面时 Cart分页查询sql句子Model 的一个简略的单元查验：ios15正式版别什么时候发布

text('adding item increass total cost', () {
fi分页预览nal cart = CartModel();
final startingPrice = cart.totalPrice;
cart.addListener(() {
expios15ect(cart.totalPriceios8备忘录, greaterThan(startingPrice));
});
cart.ad分页查询sql句子d(Item('Dash'));

Provider 之 Chaswiftui设计ngapproacheNotiferProvider

ChangeNotiferProvider是一个为子节点供给 ChangeNotife分页符怎样参加r 实例的组件。这是在 Provider 包中界说的。分页符怎样显示出来
咱们之前讲到过要在方位状况的组件上层界说 状况，即这儿的 ChangeNotifierProvider。关于CartModel 来说，这意味着是产品列表和购物车的上层——那便是咱们的 App 这一层。

void main(appearance) {
runApp(
ChangeNotifier分页符怎样删去Provideios14.4.1更新了什么r(
create: (conios15正式版别什么时候发布text) => CartModel(),
child: const App(),
),
);
}

需求留心，咱们界说了一个结构办法来回来 Caapp下载rtModel的实例政策。ChangeNotifierProvider 在没有必要的状况下不会从头构建 CartMappointmentodel。而且，会在分页符怎样显示出来实例不再需求的时分调用 dispose 来销毁该政策。假定咱们需求供给多个状况示例政策，能够运用 MultiProvider：

void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context)swiftui教程 => CartModel()),
Provider(create: (context) => SomeOtherClass()),
],
child: c分页查询sql句子onst App分页预览怎样封闭(ios8备忘录),
),
);
}

Provapproachider 之 Co分页符nsumer

现在 Cswiftui编程artModel 现已可swiftcode是什么意思中文以经过在运用顶层界说的ChangeNotifierP分页rovideappointmentr供给给组件了，我swiftui有用事例们就能够在组件中运用了。

return Consumer<CartModel>(
builderios14.4.1更新了什么: (context, cart, child) {
return Text('applicationTotal price is ${cart.totalPrice}');
},
);

在 Consumer 中咱们有必要指定咱们要拜访的模型的类。在这个比如中，咱们需求 CartModswiftcode代码查询el，因而咱们是运用 Capp下载onsumer。假定在泛型中不指定那个类ios14.7正式版，那 Provider 包将无法帮助咱们。Provideswiftui结构r 是根据类型供给状况信息的，假定没有指定类型那它不知道组件需求什么信息。
Coswift代码是什么意思nsumer只需求一个必填参数，那便是 builder。builder是在 ChangeNotifer 政策产生改动时会被调用的函数。也ios15正式版别什么时候发布便是在状况模型的notifyListeners 办法被调用到时分，全部照应该状况模型的Consumer 的builder 办法都会被调用。
builder 办法有三个参数，第一个是和组件的build 办法application相同的 context；第二个是触发build 函数调用的ChangeNotifier实例政策，咱们能够从中获取 UI 界面所需swiftcode代码查询求的数据。第三个参数是 child，这是用于优化的。假定在咱们的 Consumer下有一个很大的子组件树，而且在模型改动的时分这些子组件树并不需求改动，那么咱们就能够只需求对这个iOS子组件构建一次：

return Cswiftui编程onsumer<CartModel>(
builder: (conswiftui编程text, cart, cios模拟器hild) => Stackios15 (
children: [
if(child != null) child,
Text('Total price isswift代码是什么意思 ${cart.totalPrice}'),
],
),
child: cios15onst SomeExpensiveWidget(),
);

将 Consumer 组件放置在组件树的方位越深越好，这样其他部分的某些细节改动时我无需构建许多的 UI，然后能够前进功能。

// 糟糕的swiftkey示例
return Consumre<CartMoswift代码是什么意思del>(
builder: (context, cart, child) {
return HumongousWidget(
child: AnotherMonstrousWiappearancedget(
//swiftcode代码查询...
chswifterild: Text('Total price is ${cart.totalPrice}'),
),
);
}
);

正确的做法是这样：

return HumongousWidget(
child: AnotherMonstrousWidget(
//...
child: Consumre&lios模拟器t;CartModel>(
builder: (context, cart, child) {
return Text('Total price is ${caappreciatert.totalPrice}');
},
)
),
);

Provider.of 办法

在某些状况下，咱们并不需求根据状况信息更改界面，而是拜访分页符怎样设置状况政策swiftui编程以进行其他操作。例如咱们有一个清空购物车的按钮，点击按钮ios15正式版别什么时候发布的时分需求调用 CartModel 的 removeAll 办法，这个时分咱们能够这么写：

onPressed: () {iOS
Provider.of&liOSt;CartModel>(contextSwiftUI, listen: false).removeAll();
}

留心，listen 参数设置为 false 标明当状况改动的分页符和分节符的差异时分无需告诉该组件进行重建。

总结

代码已上传至 gitee：简略状况处理示例。运转效果如下（对原示例做了少许改动，以像真实的购物车）。能够看到，运用了状况处理有下面几个利益：

  1. 页面间的数据是同步的。
  2. 即便退出页面后，再进入之前的状况仍是坚持的，这也是为什么要把状况处理放置在更上层级的原因之一。
  3. 事务代码和界面是别离的，界面只担任页面的烘托和交互，而详细的事务逻辑在状况处理中结束。代码更简单保护。
  4. 大部分页面能够设置为无状况组件，经过 Provider 结束部分改写然后前进功能。

Flutter 入门与实战（四十）：以购物车为例初探状况办理 | 8月更文应战

我是岛上码农，微信公众号同名，这是Flutter 入门与实战的专栏文章。

：觉得有application收成请点个赞鼓动一下！

：保藏文章，便当回看哦！

：谈论交流，彼此跋涉！