Fish Redux系列学习之认识view、action

布满荆棘的人生 2021-08-24 21:50 269阅读 0赞

继续上一篇文章：

[Fish Redux系列学习之新建page以及认识state][Fish Redux_page_state]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
如上图，现在我们学习的是`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()
                );
              },
            )
          ],
        ),
      );
    }

放上截图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]

这里直接是一个函数返回`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`中进行调用。

如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]  
以上就是这篇文章学习的`view、action`两个功能点，接下来我们将学习一下`effect、reducer`这两个功能。

[Fish Redux_page_state]: https://blog.csdn.net/xudailong_blog/article/details/104128560
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/dbad18f6e8e84b25b69d05a6c323ba9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 1]: /images/20210529/581f6b5b53f94d6cb3e92697e97cbe6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70 2]: /images/20210529/0ca360e8cf83416bb0a908082d454d7f.png