示例工程移动开发【免费下载链接】Flutter-NotebookFlutterDemo合集今天你fu了吗项目地址https://gitcode.com/gh_mirrors/fl/Flutter-Notebook点击查看免费下载本文基于 Flutter-Notebook 仓库中的 redux_demo 示例完整讲解如何在 Flutter 应用中引入 Redux 单向数据流架构通过 Store、Action、Reducer 与 StoreConnector 实现在不同页面之间共享并同步同一份状态。读完本文你将掌握redux与flutter_redux两个核心库的协作方式并能在自己的项目里复刻这套计数器跨页面共享的最小可运行架构。一、示例背景为什么需要 Reduxredux_demo 是 Flutter-Notebook 众多示例中专门演示使用 Redux 在 Flutter 中共享状态的工程。它的核心场景是两个独立页面TopScreen 与 UnderScreen需要读取同一个计数值并且在一个页面里修改后另一个页面要同步更新。在传统写法中这种跨页面共享往往依赖回调、全局单例或层层传递参数页面多了之后会变得难以维护。Redux 将状态管理收敛为一条单向数据流规避了上述问题。示例在 README.md 中明确点明主题使用 redux在 flutter 中共享状态的 demo。在动手阅读源码之前先建立 Redux 的三个基础概念概念作用对应本示例Store全局唯一的状态仓库持有当前 State接收 Action 并调用 Reducer 生成新 StateStoreCountStateAction描述发生了什么的普通对象或枚举不携带逻辑Action.incrementReducer纯函数根据旧 State 与 Action 计算出新 Statereducer(CountState state, action)二、工程结构一览redux_demo 采用经典 Flutter 工程布局核心代码集中在lib/目录下mecury_project/example/redux_demo/lib/ ├── main.dart # 入口创建 Store用 StoreProvider 注入全局 ├── states/ │ └── count_state.dart # 定义 State、Action 枚举与 reducer ├── top_screen.dart # 页面一通过 StoreConnector 读取计数值 └── under_screen.dart # 页面二读取计数值并派发 Action 修改从文件划分可以看出示例把状态的定义与变更逻辑states/与UI 展示两个 Screen完全分离这正是 Redux 架构的核心收益之一。测试文件位于 test/widget_test.dart当前为空的脚手架后续可在此基础上编写针对 reducer 与页面的测试。三、依赖配置redux 与 flutter_redux在 pubspec.yaml 中示例声明了两个关键依赖dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 redux: ^3.0.0 # 纯 Dart 的 Redux 核心实现 flutter_redux: ^0.5.2 # 连接 Redux 与 Flutter Widget 的桥接层两者的分工值得说明redux纯 Dart 包提供Store、Reducer等核心类型不依赖任何 UI 框架可在纯 Dart 逻辑层使用flutter_redux在 redux 之上提供StoreProvider、StoreConnector等 Widget负责把 Store 注入组件树并在状态变化时自动重建订阅它的 Widget。由于 demo 生成时间较早SDK 约束为sdk: 2.0.0-dev.68.0 3.0.0若在较新版本的 Flutter 环境复现需要相应升级依赖版本。四、定义 State、Action 与 Reducer状态相关的全部逻辑集中在 count_state.dart三部分内容对应 Redux 的三个核心概念4.1 只读的 Stateimport package:meta/meta.dart; /** * State中所有属性都应该是只读的 */ immutable class CountState { final int _count; get count _count; CountState(this._count); CountState.initState() : _count 0; }要点用immutable注解标记整个类配合final int _count保证状态字段一旦创建不可修改对外只暴露 gettercount外部无法直接改写内部值CountState.initState()是命名构造函数提供初始状态_count 0供创建 Store 时使用。这是 Redux 的重要约定State 不可变任何更新都通过生成新对象完成从而保证状态变化可追踪、可回溯。4.2 用枚举表达 Action/** * 定义操作该State的全部Action * 这里只有增加count一个动作 */ enum Action { increment }demo 只有一个动作增加计数因此直接用 Dart 枚举表达。更复杂的业务中通常会为每个 Action 定义携带 payload 的类。4.3 纯函数 Reducer/** * reducer会根据传进来的action生成新的CountState */ CountState reducer(CountState state, action) { //匹配Action if (action Action.increment) { return CountState(state.count 1); } return state; }reducer 是 Redux 中唯一允许修改状态的地方且必须是纯函数入参为旧 State 与 action匹配到Action.increment时返回一个新对象CountState(state.count 1)而不是修改旧对象未匹配任何 Action 时原样返回旧 State注意这里按 demo 原始实现返回state即同一个引用。五、创建 Store 并注入全局5.1 入口创建 Storemain.dart 的第 711 行创建了全局唯一的 Storevoid main() { final store StoreCountState(reducer, initialState: CountState.initState()); runApp(new MyApp(store)); }StoreCountState指定状态泛型第一个参数传入reducer所有 dispatch 的 Action 都会流经它initialState: CountState.initState()指定初始计数值为 0。MyApp接收 store 并把它保存为成员变量class MyApp extends StatelessWidget { final StoreCountState store; MyApp(this.store); ... }5.2 用 StoreProvider 向全树注入return StoreProviderCountState( store: store, child: new MaterialApp( title: Flutter Demo, theme: new ThemeData( primarySwatch: Colors.blue, ), home: TopScreen(), ), );StoreProviderCountState是 flutter_redux 提供的 InheritedWidget 类组件位于组件树顶层。它的作用是把 store 注入 Widget 树使树中任意位置的StoreConnector都能拿到同一个 Store——这正是跨页面共享状态的基础两个页面虽然在导航栈中是不同路由但它们都挂在同一个StoreProvider之下。六、用 StoreConnector 读取状态6.1 TopScreen只读展示top_screen.dart 的页面主体通过StoreConnectorCountState,int订阅状态body: Center( child: StoreConnectorCountState,int( converter: (store) store.state.count, builder: (context, count) { return Text( count.toString(), style: Theme.of(context).textTheme.display1, ); }, ), ),两个泛型参数分别表示CountStateStore 中的状态类型与intconverter 转换后的输出类型。核心机制converter把整个 Store 转换为页面需要的子集这里取出store.state.countintbuilder接收转换结果count构建 Text 展示计数值。StoreConnector会自动订阅 Store任何 reducer 产生新状态后converter 重新执行、builder 用新值重建 Widget无需手动setState。TopScreen 的浮动按钮只负责跳转到第二个页面UnderScreen不修改状态floatingActionButton: FloatingActionButton( onPressed: () { Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){ return UnderScreen(); })); }, child: Icon(Icons.forward), ),6.2 UnderScreen读取并派发 Actionunder_screen.dart 是本例共享的关键它在另一个路由中读取同一个计数值并通过 dispatch 修改它。读取部分的写法与 TopScreen 完全一致StoreConnectorCountState,int( converter: (store) store.state.count, builder: (context, count) { return Text( count.toString(), style: Theme.of(context).textTheme.display1, ); }, ),而修改通过第二个StoreConnector完成converter 不再返回值而是返回一个派发动作的回调函数floatingActionButton: StoreConnectorCountState,VoidCallback( converter: (store) { return () store.dispatch(Action.increment); }, builder: (context, callback) { return FloatingActionButton( onPressed: callback, child: Icon(Icons.add), ); }, ),要点converter 输出类型改为VoidCallback返回闭包() store.dispatch(Action.increment)builder 拿到callback后把它绑定到按钮的onPressed点击按钮即向全局 Store 派发Action.incrementreducer 生成新 State两个页面上的StoreConnector同时收到更新并重建。七、完整数据流一次点击的完整旅程把上述代码串联起来一次在 UnderScreen 点击 的完整数据流为用户点击 UnderScreen 的 FloatingActionButton触发callback回调执行store.dispatch(Action.increment)Action 被送入全局 StoreStore 调用reducer(CountState, Action.increment)生成新对象CountState(state.count 1)Store 通知所有订阅者两个页面的StoreConnector每个StoreConnector重新执行 converter 取出新countbuilder 重建 Text 显示新值。由于两个页面共享同一个 Store即使 UnderScreen 是通过Navigator.push推入的新路由计数依然同步——这正是跨页面共享状态的直观体现也对应原文档中展示的 样例截图。八、如何运行与验证进入示例目录后按常规 Flutter 流程运行cd mecury_project/example/redux_demo flutter pub get # 拉取 redux / flutter_redux 等依赖 flutter run # 在设备或模拟器上运行验证共享行为在 TopScreen 点击右下角前进按钮进入 UnderScreen在 UnderScreen 点击 按钮计数加一返回 TopScreen 后可以看到同一计数值已同步更新TopScreen 中的StoreConnector同样订阅了 Store。九、从源码结构看可扩展方向从当前工程的源码结构可以推断出它是一套最小可运行的 Redux 骨架若要应用到真实项目可在此基础上扩展State 拆分当前CountState只有一个_count字段真实业务可将状态按模块拆分后用combineReducers组合Action 携带数据枚举 Action 无法携带 payload可改为类如class IncrementBy { final int value; }异步逻辑redux 生态中可引入redux_thunk或redux_epics处理网络请求等副作用补充测试test/widget_test.dart 目前是空壳建议针对 reducer 的纯函数特性编写单元测试给定旧 State 与 Action断言新 State 值这是 Redux 架构易于测试的直接收益。十、小结redux_demo 以不足百行核心代码演示了 Redux 在 Flutter 中的标准用法CountState不可变状态Action枚举事件描述reducer纯函数更新StoreProvider全局注入StoreConnector订阅与派发。其价值在于用最小成本展示了跨页面共享状态这一 Redux 最典型的使用场景是理解 Flutter-Notebook 中状态管理系列示例bloc_demo、scoped_demo 等的入门参照。若需要完整的第三方库用法文档可参考 redux 与 flutter_redux 的官方包说明本示例的 pubspec.yaml 中已给出对应的版本约束。赞分享示例工程移动开发【免费下载链接】Flutter-NotebookFlutterDemo合集今天你fu了吗项目地址https://gitcode.com/gh_mirrors/fl/Flutter-Notebook点击查看免费下载相关推荐Flutter-Notebook页面状态KeepAlive实现多页面状态保持Flutter Notebook页面状态KeepAlive实现多页面状态保持 在Flutter应用开发中页面切换时状态丢失是常见问题。用户在Tab页间切换时示例工程移动开发Flutter-Notebook状态管理Redux持久化实现Flutter Notebook状态管理Redux持久化实现 在移动应用开发中状态管理是确保用户体验流畅的核心环节。当应用需要在重启后保留用户数据或界面状态示例工程移动开发Flutter-Notebook状态管理Redux中间件应用Flutter Notebook状态管理Redux中间件应用 你是否在Flutter开发中遇到过状态管理混乱的问题当应用复杂度提升时如何优雅地处理异步操作示例工程移动开发创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考