[toc]

FishRedux完成一个玩安卓客户端

前言

不知不觉从18年接触Flutter断断续续到现在，说是一直在玩，其实接触得也都很浅~ 实际说起来，貌似自己一点都不懂... 虽然自己断断续续也写了一些app： 玩安卓 钢铁直男版 也在公司app上集成了一个单页面的flutter首页 [捂脸] 但是说实话我自己都不想去玩，好垃圾~

所以才会想在年底比较闲的时候，做出一个至少我愿意装在我手机上的app，至少是...对我有用的app，所以才有了这个项目。

希望自己可以一直有恒心完善下去：

已完成

• [x] 首页文章列表
• [x] banner
• [x] 微信公众号列表
• [x] 热门项目
• [x] 搜索
• [x] 我的收藏（网站，文章）
• [x] 添加&删除&编辑收藏
• [x] 体系
• [x] 导航
• [x] 积分（收益详情&排名列表）
• [x] 分享
• [x] 主题换肤

未完成

• [ ] todo模块，希望可以完成一个todo提示，
• [ ] 吃枣药丸，加入一些比较好玩的东西，看博客腻了可以看点好玩的
• [ ] 放松放松，同上
• [ ] 实用工具，（至少我要加入一个千卡转千焦，千焦转大卡的计算工具）
• [ ] webViewPlugs和flutter自带webView的切换（实际上试过，plugs是整个覆盖在flutter页面上，实际上体验一般，很多控件不能自己定义；自带的webview性能一般）
• [ ] 切换字体
• [ ] and so on

基本架子

Flutter开发的一个爽点是：无脑堆代码（大雾），而最大的痛点也是这个，很多时候你会发现自己哼哧哼哧一通代码写下来：

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: null,
        title: null,
        actions: <Widget>[],
      ),
      body: Column(children: <Widget>[],),
      bottomNavigationBar: Row(children: <Widget>[],),
    );
  }
}

哇！！ 一气呵成！ 浑身通透！ 再仔细一看：

                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

而且这只是v的代码，更别说还有mc的代码，一个稍微复杂点的页面，轻而易举就上了几百行代码，更别说没有提供页面预览功能（新版as已经提供了），这给日后的界面修改和业务修改都增加了难度，这其实就是很多人被劝退的直接原因了。 有没有解决办法呢？ 其实是有的，页面拆分就是一个不错的办法，把一个页面进行业务级的拆分，多个cell组成一个页面，单个cell可以独立，其实就是组件化的思想，但是！还是麻烦！！！ 而且我也不满足于原生的方法，因为群里大佬已经在疯狂安利FishRedux了，而我想着说，反正是个2019的句号，索性我也画得疯狂一点，就用fisnRedex了。

###提前总结

代码量爆炸！ 但是爽！！！！ 爽得可以边写代码边喝酒边唱歌！ 有坑！！！！ 坑巨多！！ 文档贼少！！！ 大部份坑都是可以解决的，而且很爽

如果不是很了解fishRedux的可以去看下 fishRedux地址 用FishRedux完成一个登录页面

页面预览

路由定义：

/// 创建应用的根 Widget
/// 1. 创建一个简单的路由，并注册页面
/// 2. 对所需的页面进行和 AppStore 的连接
/// 3. 对所需的页面进行 AOP 的增强

class AppRoute {
  static AbstractRoutes _global;

  static AbstractRoutes get global {
    if (_global == null) {
      _global = PageRoutes(
        pages: <String, Page<Object, dynamic>>{
          /// 闪屏页
          'splash': SplashPage(),

          /// 首页
          'home': MainPage(),

          /// 登录页面
          'login': LoginPage(),

          /// 注册页面
          'register': RegisterPage(),

          /// 首页的第二个tab
          'second': SecondPage(),

          /// 首页的第一个tab
          'index': IndexPage(),

          ///项目目录
          'project_list': ProjectListPage(),

          /// 项目子目录
          'project_child_list': ProjectChildPage(),

          /// webView页面
          'webView': WebLoadPage(),

          /// 微信公众号列表页面
          'wechat_author': AuthorPage(),

          /// 微信公众号文章列表页面
          'wechat_author_article': AuthorArticlePage(),

          /// 用户积分
          'user_point': UserPointPage(),

          /// 用户排名
          'user_rank': UserRankPage(),

          /// 网址收藏
          'web_collection': WebCollectionPage(),

          ///文章收藏
          'article_collection': ArticleCollectionPage(),

          /// 体系列表
          'system': SystemPage(),

          /// 体系列表下属文章
          'system_child': SystemChildPage(),

          /// 导航体系
          'navi': NaviPage(),

          /// 侧滑页面
          'draw': DrawPage(),

          /// 主题颜色修改
          'theme_change': ThemeChangePage(),

          /// 搜索页面
          'search': SearchPage(),
        },
        visitor: (String path, Page<Object, dynamic> page) {
          /// 只有特定的范围的 Page 才需要建立和 AppStore 的连接关系
          /// 满足 Page<T> ，T 是 GlobalBaseState 的子类
          if (page.isTypeof<GlobalBaseState>()) {
            /// 建立 AppStore 驱动 PageStore 的单向数据连接
            /// 1. 参数1 AppStore
            /// 2. 参数2 当 AppStore.state 变化时, PageStore.state 该如何变化
            page.connectExtraStore<GlobalState>(GlobalStore.store,
                (Object pageState, GlobalState appState) {
              final GlobalBaseState p = pageState;
//              if (p.themeColor != appState.themeColor &&
//                  p.ifLogin != appState.ifLogin) {
              if (pageState is Cloneable) {
                print('修改--进行复制');
                final Object copy = pageState.clone();
                final GlobalBaseState newState = copy;
                newState.themeColor = appState.themeColor;
                newState.ifLogin = appState.ifLogin;
                newState.screenH = appState.screenH;
                newState.screenW = appState.screenW;
                newState.userPoint = appState.userPoint;
                return newState;
//                }
              }
              return pageState;
            });
          }

          /// AOP
          /// 页面可以有一些私有的 AOP 的增强， 但往往会有一些 AOP 是整个应用下，所有页面都会有的。
          /// 这些公共的通用 AOP ，通过遍历路由页面的形式统一加入。
          page.enhancer.append(
            /// View AOP
            viewMiddleware: <ViewMiddleware<dynamic>>[
              safetyView<dynamic>(),
            ],

            /// Adapter AOP
            adapterMiddleware: <AdapterMiddleware<dynamic>>[
              safetyAdapter<dynamic>()
            ],

            /// Effect AOP
            effectMiddleware: <EffectMiddleware<dynamic>>[
              _pageAnalyticsMiddleware<dynamic>(),
            ],

            /// Store AOP
            middleware: <Middleware<dynamic>>[
              logMiddleware<dynamic>(tag: page.runtimeType.toString()),
            ],
          );
        },
      );
    }
    return _global;
  }
}

Widget createApp() {
  final AbstractRoutes routes = AppRoute.global;

  return MaterialApp(
    title: '玩安卓',
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      indicatorColor: ColorConf.ColorFFFFFF,
      primarySwatch: ColorConf.themeColor,
    ),
    home: routes.buildPage('splash', null),
    onGenerateRoute: (RouteSettings settings) {
      return MaterialPageRoute<Object>(builder: (BuildContext context) {
        return routes.buildPage(settings.name, settings.arguments);
      });
    },
  );
}

/// 简单的 Effect AOP
/// 只针对页面的生命周期进行打印
EffectMiddleware<T> _pageAnalyticsMiddleware<T>({String tag = 'redux'}) {
  return (AbstractLogic<dynamic> logic, Store<T> store) {
    return (Effect<dynamic> effect) {
      return (Action action, Context<dynamic> ctx) {
        if (logic is Page<dynamic, dynamic> && action.type is Lifecycle) {
          print('${logic.runtimeType} ${action.type.toString()} ');
        }
        return effect?.call(action, ctx);
      };
    };
  };
}

首页

根据FishRedux的思想，我们把首页架构定义为： 一个大的page（MainPage），里面用pageView装载了两个大的page（SecondPage&IndexPage），

view

Widget buildView(MainState state, Dispatch dispatch, ViewService viewService) {
  /// 渲染appBar
  AppBar _renderAppBar() {
    return AppBar(
      backgroundColor: state.themeColor,
      centerTitle: true,
      titleSpacing: 60,
      title: TabBar(
        tabs: state.menuList
            .map((e) => Tab(
                  text: e,
                ))
            .toList(),
        labelColor: Colors.white,
        controller: state.tabControllerForMenu,
        labelPadding: const EdgeInsets.all(0),
        labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        unselectedLabelStyle: TextStyle(fontSize: 14),
        indicatorPadding: const EdgeInsets.all(0),
        indicatorSize: TabBarIndicatorSize.label,
      ),
      leading: Builder(builder: (ctx) {
        return IconButton(
          onPressed: () {
            dispatch(MainActionCreator.onOpenDraw(ctx));
          },
          icon: Image.asset(
            'images/icon_more.png',
            color: Colors.white,
            height: 24,
          ),
        );
      }),
      actions: <Widget>[
        IconButton(
          onPressed: () {
            dispatch(MainActionCreator.onToSearch());
          },
          icon: Icon(Icons.search),
        )
      ],
    );
  }

  return Scaffold(
    primary: true,
    appBar: _renderAppBar(),
    body: TabBarView(
      controller: state.tabControllerForMenu,
      children: <Widget>[
        KeepAliveWidget(AppRoute.global.buildPage('second', null)),
        KeepAliveWidget(AppRoute.global.buildPage('index', null)),
      ],
    ),
    drawer: AppRoute.global.buildPage('draw', null),
  );
}

and so on

好像也没有其他什么需要注意的了，只有一个难点是TabController,以及page页面需要如何保活：

定义自己的TabController

这个可以参考下之前的文章：在fishRedux中使用TabController