这是我参与8月更文应战的第23天，活动概略查看：8月更文应战

前语

前面两篇咱们对 Redux 的根柢运用和中间件有了根柢的知道，这一篇咱们来议论假定完结多组件同享状况数据。和 Provider 类似，要同享数据的条件是这些组件在同一个父级组件下下级组件。

页面结构

咱们的页面结构分为三个部分，对应的是三个组件：

  • 购物清单：支撑对单个项目进行选择或吊git教程销选择，表示该application物品是否现已结束购买；
  • 新增购物项弹窗：点击招认后增加新的物品到清单；
  • 底部购物清单核算信息：提appointment示当前购物清单结束发展。

界面如下图所示，界面中的三个组件彼此之间是独立的，但都需求用到同一个状况数据，那便是购物清单。

Flutter 入门与实战（六十）：以购物清单为例叙述 Redux 的状况怎么多组件同享

界面构建的代码这儿就不贴了，能够到这儿下载源码：Redux 状况办理源码。

组件间同享状况

上面的三个组件其实是不相关的，那么就需求将状况界说在三个组件的一起的上级flutter是什么意思组件上。这儿有个特殊的组件是增加购物项的对话框弹窗，调用方法是：

void _openAddItemDialog(BuildContex源码精灵t context) {
showDialog(context源码是什么意思: context, buildergitee: (context) => AddItemDialogiteeg());
}

这儿的 showDiaflutter值得学吗log 方法其实是弹出了一个新的页面，这就导致了这个弹出的对话Git框除了 Material热镀锌钢管App 外，不是其他组appearance件的子组件。因此，状况的界说就需求说到尖端，也便是放置在 MaterialApp的上级，如下所示。这样整个运用的组件都能够同享到这个状况办理了。

class MainApp extends StateleflutteredssWidget {
MainAp源码p({Key? key}) : super(keyappreciate: key);
final store = Store<ShoppingListState>(
shopping热镀锌槽钢ListReducer,
initialapp下载State: ShoppingListState.initial(),
);
@override
Widget build(BuildContexgithup官网t context) {
return StoreProvider(
store: store,
child: MagithubterialApp(
title: 'Redux Countgiteeer Demo',
theme: ThemeData(
priflutteredmarySwatch: Coappreciatelors.blue,
),git教程
home: ShoppingListHome(),
builder: EasyLoading.in热镀锌钢管it(),
),
);
}
}

中心事务

实践事务的组件为 ShoppingListHome：

class ShoppingListHome extends StatelessWidgflutter开发的app有哪些et {
const ShoppingListHome({Key? key}) : supergithub(key: key);
@ov热镀锌槽钢erride
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('购物清单'),
),
body: StoreConnector<ShoppingLisappearancetSta热毒型痤疮te, List<Widget&gtfluttershy;>(
converter: (store) => _ShoppListViewModel.build(store),
builder: (context, items) => ListView.builder(
itemBuildergit教程: (context, index) => items[index],
itemCount: items.length,
),
),
bottomSheet: _BottomStatisticBar(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => _openAddItemDialog(context),
),
);
}
}

中心事务分为四部分：

  • 清单显现：这儿运用了 St热镀锌钢管规格型号表oreConnector 直接将状况githup官网的清单列表热镀锌钢管理论重量表经过 converter转化为要显现的组件列表，这样 ListView.builder 能够直接运用。
  • 底部核算：底部核算读取状况列表中的已选中的个数，也是 经过 converter 进行转化。
claapprovess _BottomStatisticBar extends StaapplicationtelessWidget {
const _BottomSt源码交易网站源码atisticBar({Key? key}) : suflutter框架per(key: key);
@override
Widgeapproacht build(BuildContext context) {
return StoreConnector<ShoppingListState, int>源码是什么意思(
bui热镀锌钢管国标厚度lder: (context, selectedCount) => Container(
height: 60,
width: double.infinity,
color: Colors.grey,
padflutteringding: EdgeI源码网站nsets.all(1Git0),
capplehild: Text('已结束$selectedCountappear项'),
),
converter: (store) =&gtflutterbat;
store.state.shoppingItems.where((item) => item.selected).length,
);
}
}
  • 勾选框选中或吊销选择：此刻只需求经过 store 建议状况改动的 ToggleItemStateAction。
// ...fluttered
Checkbox(
value: item.selected,
onChanged: (valuegithub永久回家地址) {
storeapp下载.dispatch(ToggleItemStateAction(item: item));
},
),
//...
  • 增加新购物项：这儿咱们经过 converter 将状况转化为一个回调函数，以便对话框点击增加按钮后运用该回调函数建议回调。
class AddItemDialog extends StatelessWidget {
@override
Widget build(Buil源码之家dContext context) {
return StoreConnector&git教程lt;ShoppingListState, OnItemAddedCallback>(
converapp下载ter: (store) {
return (itemName) => store.dispatch(
AddItemAction(
item: ShoppingItem(
naflutter中文官网me: itemName,
sgithub永久回家地址electe热毒型痤疮d:fluttershy false,
)),
);
},
builder: (context, callback) {
return _AddItemDialogWidget(callback);
},
);
}
}

从这几个事务能够看到，converter 的方法非常灵敏，能够根据咱们界面需求哪些元素giti轮胎是什么品牌，将状况进行转化得到视图模型，然后能够简化咱们的视图模型的构建。

作业Redux作用

作业作用如下图所示热镀锌钢管最新价格，这儿咱们会发现一个问题，那便是假定flutter值得学吗两个购物项称号相同，会导致复选框的选中出现问题，flutter是什么意思而实践flutterbat上，关于增加相同的选项时，咱们能够增加数量。下一篇咱们针对这个运用进行进一步完善，例如数量显现问题以及离线存储，完结一个相对完善的 Redux 的运用示例。

Flutter 入门与实战（六十）：以购物清单为例叙述 Redux 的状况怎么多组件同享

总结

本篇介绍了在尖端组件application构建Store的方法完结了多热镀锌钢管组件同享 Redux 的状况。关于处于同一组件树的组件，都能够采用这种方法来同享状况。一起，实践开发中能够灵敏运用 StorflutteredeConnector 的 converter 参数，经过这种方法能够简化界面的构建。

我是岛上码农，微信大众号同名，这是Flutter 入门与实战的专栏文章，对应源码请看这儿：Flutter 入热镀锌钢管门与实战专栏源码。

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

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

：议论交流，彼此行进！