fish_redux使用详解---看完就会用! (4)

这里只增加了俩个页面:FirstPage和SecondPage;并将主页面入口换成了:FirstPage

Widget createApp() { ///定义路由 final AbstractRoutes routes = PageRoutes( pages: <String, Page<Object, dynamic>>{ ///计数器模块演示 "CountPage": CountPage(), ///页面传值跳转模块演示 "FirstPage": FirstPage(), "SecondPage": SecondPage(), }, ); return MaterialApp( title: 'FishRedux', home: routes.buildPage("FirstPage", null), //作为默认页面 onGenerateRoute: (RouteSettings settings) { //ios页面切换风格 return CupertinoPageRoute(builder: (BuildContext context) { return routes.buildPage(settings.name, settings.arguments); }); }, ); } FirstPage

先来看看该页面的一个流程

view ---> action ---> effect(跳转到SecondPage页面)

effect(拿到SecondPage返回的数据) ---> action ---> reducer(更新页面数据)

state

先写state文件,这边需要定义俩个变量来

fixedMsg:这个是传给下个页面的值

msg:在页面上展示传值得变量

initState方法是初始化变量和接受页面传值的,这边我们给他赋个初始值

class FirstState implements Cloneable<FirstState> { ///传递给下个页面的值 static const String fixedMsg = "\n我是FirstPage页面传递过来的数据:FirstValue"; ///展示传递过来的值 String msg; @override FirstState clone() { return FirstState()..msg = msg; } } FirstState initState(Map<String, dynamic> args) { return FirstState()..msg = "\n暂无"; }

view

该页面逻辑相当简单,主要的仅仅是在onPressed方法中处理逻辑

Widget buildView(FirstState state, Dispatch dispatch, ViewService viewService) { return _bodyWidget(state, dispatch); } Widget _bodyWidget(FirstState state, Dispatch dispatch) { return Scaffold( appBar: AppBar( title: Text("FirstPage"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('下方数据是SecondPage页面传递过来的:'), Text(state.msg), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () { ///跳转到Second页面 dispatch(FirstActionCreator.toSecond()); }, child: Icon(Icons.arrow_forward), ), ); }

action:这里需要定义俩个枚举事件

toSecond:跳转到SecondPage页面

updateMsg:拿到SecondPage页面返回的数据,然后更新页面数据

enum FirstAction { toSecond , updateMsg} class FirstActionCreator { ///跳转到第二个页面 static Action toSecond() { return const Action(FirstAction.toSecond); } ///拿到第二个页面返回的数据,执行更新数据操作 static Action updateMsg(String msg) { return Action(FirstAction.updateMsg, payload: msg); } }

effect

此处需要注意:fish_redux 框架中的Action类和系统包中的重名了,需要把系统包中Action类隐藏掉

传值直接用pushNamed方法即可,携带的参数可以写在arguments字段中;pushNamed返回值是Future类型,如果想获取他的返回值,跳转方法就需要写成异步的,等待从SecondPage页面获取返回的值,

/// 使用hide方法,隐藏系统包里面的Action类 import 'package:flutter/cupertino.dart' hide Action; Effect<FirstState> buildEffect() { return combineEffects(<Object, Effect<FirstState>>{ FirstAction.toSecond: _toSecond, }); } void _toSecond(Action action, Context<FirstState> ctx) async{ ///页面之间传值;这地方必须写个异步方法,等待上个页面回传过来的值;as关键字是类型转换 var result = await Navigator.of(ctx.context).pushNamed("SecondPage", arguments: {"firstValue": FirstState.fixedMsg}); ///获取到数据,更新页面上的数据 ctx.dispatch(FirstActionCreator.updateMsg( (result as Map)["secondValue"]) ); }

reducer

这里就是从action里面获取传递的值,赋值给克隆对象中msg字段即可

Reducer<FirstState> buildReducer() { return asReducer( <Object, Reducer<FirstState>>{ FirstAction.updateMsg: _updateMsg, }, ); } FirstState _updateMsg(FirstState state, Action action) { return state.clone()..msg = action.payload; } SecondPage

这个页面比较简单,后续不涉及到页面数据更新,所以reducer模块可以不写,看看该页面的流程

view ---> action ---> effect(pop当前页面,并携带值返回)

state

该模块的变量和FirstPage类型,就不阐述了

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxfxz.html