继续上一篇文章:
Fish Redux系列学习之新建page以及认识state
如上图,现在我们学习的是buildview
这个组件,说白了,buildView
是我们写页面的地方,跟写普通flutter的page页面一样,我们将页面都写在这里面。
View部分:
view部分的代码:
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:miaoxun/utils/image_constant.dart';
import 'package:miaoxun/utils/images_util.dart';
import 'state.dart';
import 'action.dart';
Widget buildView(SplashState state, Dispatch dispatch, ViewService viewService) {
return Scaffold(
backgroundColor: Color.fromRGBO(255, 209, 0, 1),
body: Center(
child: Image.asset(ImageUtil.getImgPath(ImageConstant.qidong),width: 83.5, height: 33.0,),
),
appBar: AppBar( // 加这个appbar只是示例跳转,
title: Text(state.title),
actions: <Widget>[
GestureDetector(
child: Text('点我跳转'),
onTap: (){
dispatch(SplashActionCreator.onAction()
);
},
)
],
),
);
}
放上截图:
这里直接是一个函数返回Widget
视图,其中state、dispatch、viewService
就是fishredux
中所夹带的参数,state
带有数据以达到更新数据刷新页面的效果,dispatch
是承接用户的一些操作,进行时间的分发,如:刷新,跳转页面,弹框等。viewService
是一个包含Context
的viewService
,主要是进行一些adapter、component、dialog
等组件的组装。
action部分:
action部分的代码:
import 'package:fish_redux/fish_redux.dart';
//TODO replace with your own action
enum SplashAction { action ,toMainPage}
class SplashActionCreator {
static Action onAction() {
return const Action(SplashAction.action);
}
static Action onToMainPage(){
return const Action(SplashAction.toMainPage);
}
}
在view
代码部分我们有这样一部分代码:
GestureDetector(
child: Text('点我跳转'),
onTap: (){
dispatch(SplashActionCreator.onToMainPage()
);
},
)
在onTap
方法上直接有一个dispatch(SplashActionCreator.onToMainPage()
,顾名思义就是跳转到首页。
在action
中,我们可以看到有两个类,一个是SplashAction
,一个是SplashActionCreator
,它们两更可能的像一个暴露出去的接口,在view
中进行调用。
如下图:
以上就是这篇文章学习的view、action
两个功能点,接下来我们将学习一下effect、reducer
这两个功能。