# FishRedux 完成一個玩安卓客戶端！ FishRedux完成一個玩安卓客戶端

[toc]

FishRedux完成一個玩安卓客戶端

前言

不知不覺從18年接觸Flutter斷斷續續到現在，說是一直在玩，其實接觸得也都很淺~
實際說起來，貌似自己一點都不懂...
雖然自己斷斷續續也寫了一些app：
玩安卓
鋼鐵直男版
也在公司app上集成了一個單頁面的flutter首頁
[捂臉] 但是說實話我自己都不想去玩，好垃圾~

所以纔會想在年底比較閒的時候，做出一個至少我願意裝在我手機上的app，至少是...對我有用的app，所以纔有了這個項目。

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

已完成

• 首頁文章列表
• banner
• 微信公衆號列表
• 熱門項目
• 搜索
• 我的收藏（網站，文章）
• 添加&刪除&編輯收藏
• 體系
• 導航
• 積分（收益詳情&排名列表）
• 分享
• 主題換膚

未完成

• 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

頁面保活

在普通的stf頁面中，我們需要頁面保持，只需要實現**AutomaticKeepAliveClientMixin **：

class _TestPageState extends State<testPage> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    /// 實現super方法
    super.build(context);
    return Container();
  }

  /// 返回true
  @override
  bool get wantKeepAlive => true;
}

而在fishRedux中就比較麻煩，我們需要把這個page用keepWidget包裹起來：

import 'package:flutter/material.dart';
/// 保持狀態的包裹類
class KeepAliveWidget extends StatefulWidget {
  final Widget child;

  const KeepAliveWidget(this.child);

  @override
  State<StatefulWidget> createState() => _KeepAliveState();
}

class _KeepAliveState extends State<KeepAliveWidget>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return widget.child;
  }
}

Widget keepAliveWrapper(Widget child) => KeepAliveWidget(child)

Adapter寫法

我們看下首頁的佈局，很明顯由幾個cell組成：

• banner
• 公衆號分類gridView
• 置頂推薦
• 項目推薦
• 首頁分章分頁

如果在Android裏面，那很明顯就是一個RecyclerView+itemType組成；
如果是在Flutter原生裏面，那很明顯就是一個ListView+ItemBuilder裏面按item劃分
而我們在FishRedux裏面，我們把頁面做了一個拆分，頁面是由一個SingleScrollView組成，而無論bannerComponent，classifyComponent，projectComponent，都是它的一個cell，而重頭戲是articleComponent,它帶有了父組件帶來的loadMore和Refresh(其實整個頁面都可以由一個ListView組成，當時不是很熟就用了上面的方法)，我們來看看佈局層級：

其中的Index_view爲：

child: CustomScrollView(
      slivers: <Widget>[
        SliverToBoxAdapter(
          child: viewService.buildComponent('banner'),
        ),
        SliverToBoxAdapter(
          child: viewService.buildComponent('classify'),
        ),
        SliverToBoxAdapter(
          child: viewService.buildComponent('hotArticle'),
        ),
      ],
    ),

adapter

首頁我們需要關注的是首頁文章的Adapter,它隸屬於DynamicFlowAdapter，其他的還有

• StaticFlowAdapter
• CustomAdapter
• DynamicFlowAdapter
  我們看下首頁的代碼：

class ArticleAdapter extends DynamicFlowAdapter<HotArticleState> {
  ArticleAdapter()
      : super(
          pool: <String, Component<Object>>{
            "article_cell": ArticleCellComponent(),
            "comm_article_cell": CommArticleCellComponent(),
            "hot_project_cell": ProjectComponent(),
          },
          connector: _ArticleAdapterConnector(),
          reducer: buildReducer(),
        );
}

class _ArticleAdapterConnector extends ConnOp<HotArticleState, List<ItemBean>> {
  @override
  List<ItemBean> get(HotArticleState state) {
    List<ItemBean> _tempList = [];
    _tempList.addAll(state.hotArticleDataSource
        .map((e) => ItemBean(
            "article_cell", ArticleCellState()..hotArticleCellBean = e))
        .toList());
    _tempList.add(ItemBean(
        "hot_project_cell",
        ProjectState()
          ..projectListDataSource = state.projectDataSource
          ..screenW = state.size?.width
          ..screenH = state.size?.height));
    _tempList.addAll(state.commArticleDataSource
        .map((e) =>
            ItemBean("comm_article_cell", CommArticleCellState()..cellBean = e))
        .toList());
    return _tempList;
  }

  @override
  void set(HotArticleState state, List<ItemBean> items) {}

  @override
  subReducer(reducer) {
    return super.subReducer(reducer);
  }
}

我們稍微分析下：

1. 我們在pool中定義了component的路由
2. 我們在_ArticleAdapterConnector的get方法中返回了一個ItemBean的List,其type爲我們提前定義好的component，而data爲各個component的state（各個component的state應該爲page的子集）
3. over

個人頁面&登錄頁面

本來還想寫寫其他頁面的代碼的，但是其實都是個人主頁頁面的代碼的拓展，說難點其實沒有，唯一的尷尬點就是代碼量爆炸，還有一點是一開始用fishRedux會忘記使用方法，比如：

1. action怎麼寫？
2. 在effect還是reducer裏面寫邏輯？？
3. 我的分頁要怎麼寫比較好？
4. 臥槽，我的tabController咋寫
5. ...
   這裏把我的葵花寶典奉上，我把下面這段文字寫成了一個txt，放在桌面，忘記了就打開看看:

action
用來定義在這個頁面中發生的動作，例如：登錄，清理輸入框，更換驗證碼框等。
同時可以通過payload參數傳值，傳遞一些不能通過state傳遞的值。

effect
這個dart文件在fish_redux中是定義來處理副作用操作的，比如顯示彈窗，網絡請求，數據庫查詢等操作。

page
這個dart文件在用來在路由註冊，同時完成註冊effect，reducer，component，adapter的功能。

reducer
這個dart文件是用來更新View，即直接操作View狀態。

state
state用來定義頁面中的數據，用來保存頁面狀態和數據。

view
view很明顯，就是flutter裏面當中展示給用戶看到的頁面。

結語

這個app還很粗糙，歡迎提issue，我會持續改進的。