简析两个框架 两个框架的作用是不一样的。
flutter_boost是用来做混合项目栈管理的，由于官方推荐的混合开发多引擎模式会因为创建更多Engine而带来内存激增的问题，所以才有了复用机制的flutter_boost。
fish-redux是用来分治的，旨在将页面模块化，使界面或者条例更加清晰，有一种MVVM那种感觉；
flutter官方默认的混合方案是：多引擎模式，对于连续的Flutter页面（Widget）只需要在当前FlutterActivity打开即可，对于间隔的Flutter页面初始化新的引擎。
字面意思很好理解，如果flutter操作了一系列界面没有涉及到原生和flutter之间的切换，推荐你使用一个渲染引擎即可。如果涉及多层嵌套，推荐你每一个切换点都创建一个flutter engine用来做渲染；
这就会导致如果频繁切换会造成不必要的开销，所以比较考量软件结构涉及与页面路径层级涉及，具有了比较大的限制。
多引擎模式会造成以下几个问题：
- 内存问题。多引擎下每个引擎之间的isolate是相互独立的。所以没一个引擎底层都维护了图片缓存等比较消耗内存的对象，造成不必要的内存消耗。
- 资源冗余。每个Flutter实例在基础的platform task runner线程外，都会持有UI / GPU / IO这三个task runner 。多余的flutter实例会导致线程开销变得庞大。
- 通讯复杂。flutter页面彼此间隔离在自己的isolate中，页面通讯复杂、
- 插件注册问题。插件依赖Messager传递信息，而messager由flutterNativeView实现。多引擎会导致插件的注册和通信变得混乱且难以维护。
所有的Flutter页面共享一个Flutter实例(FlutterView)，这种方式能够有效避免多引擎方式带来的各种问题，但是单例的实现也使页面的管理变得更加复杂。 关于flutter_boost的实现大概分为2部分：
- Native部分 1.1 Container：native容器，iOS是ViewController，Android是Fragment 1.2 Container Manager：Native容器管理器 1.3 Messaging：基于Message Channel的消息通道，负责通信功能
- Dart部分 2.1 Container：Flutter widget容器，Flutter navigator路由器 2.2 Container Manager：Flutter 容器管理器 2.3 Coordinator：协调器，接收Native Messaging消息，负责调用Container Manager的状态管理
fish-redux的理解首先要理解redux的概念，其实redux的概念并不是新兴的。
Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（对象）保存这一整个应用的状态，这个对象不
能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）
Redux的核心概念有3个：action reducer store
- action：用来传递操作state的信息到store，是store的唯一来源，以对象的形式存在。
- reducer：用来处理action，通过传入旧的state和action来指明如何更新state。
- store：store是将该类对应的操作聚合；维持应用的State，提供dispatch()更新、getState()获取方法，注册注销监听器等；Redux应用只有一个单一的store
Fish Redux 是闲鱼团队基于 Redux 做的一次量身改良，通过 Redux 做集中化的可观察的数据管理。
FR 是一个基于 Redux 数据管理的组装式 flutter 应用框架， 特别适用于构建中大型的复杂应用，对于传统 Redux 在使用层面上的两大缺点做了重大改良，
具体做法是：首先规定一个组件需要定义一个数据（Struct）和一个 Reducer，同时组件之间存在着父依赖子的关系。 通过这层依赖关系去解决了 集中 和 分治 之间的矛盾，而对 Reducer 的手动层层 Combine 变成由框架自动完成，使之简化了使用 Redux 的困难，同时也得到了理想的集中的效果和分治的代码。
即一个Page由几部分组成：State Action Reducer Store Middleware，分别做一下简单的介绍：
- page代表一个页面，继承自 component。它由view（即展示ui的Widget）、state、reducer、effect等组成
- state用来保存 page/component（页面/组件）的状态，即存放数据。
- action是我们定义的意图。我们需要处理某些操作或事件时，通过发送（dispatch）特定的 action，让对应action的接收者进行处理。
- reducer的作用是接收某个意图（action），然后对数据做出修改，即更新状态（state）。Reducer 接受处理的 Action，以 { verb } 命名
- effect的用法跟 reducer 类似，但是责任不同。他负责处理“副作用”，这是函数式编程的概念。在这里简单地理解为，reducer是负责（state）的更新，effect 负责 state 更新之外的事情。Effect 接受处理的 Action，以 on{ Verb } 命名
- store维持全局的状态（state），应用只有一个单一的 store 。
- 在Dart工程，即Flutter项目中，编辑pubspec.yml。增加flutter_boost的使用，具体install方式，可以去pub.dev的Install拷贝。然后点击pub-get，即可完成插件的下载。
flutter_boost:
git:
url: 'https://github.com/alibaba/flutter_boost.git'
ref: 'task/task_v1.12.13_support_hotfixes'
- 在创建的有状态的State的class中，重写initState()方法。并在里面注册你的flutter_boost路由，并实现路由跳转方法等。
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
// 注册页面，每个页面的名称在native端和flutter端需要一致
FlutterBoost.singleton.registerPageBuilders({
'embeded': (pageName, params, _)=>EmbededFirstRouteWidget(),
'first': (pageName, params, _) => FirstRouteWidget(),
'firstFirst': (pageName, params, _) => FirstFirstRouteWidget(),
'second': (pageName, params, _) => SecondRouteWidget(),
'secondStateful': (pageName, params, _) => SecondStatefulRouteWidget(),
'tab': (pageName, params, _) => TabRouteWidget(),
'platformView': (pageName, params, _) => PlatformRouteWidget(),
'flutterFragment': (pageName, params, _) => FragmentRouteWidget(params),
///可以在native层通过 getContainerParams 来传递参数
'flutterPage': (pageName, params, _) {
print("flutterPage params:$params");
return FlutterRouteWidget(params:params);
},
});
FlutterBoost.singleton.addBoostNavigatorObserver(TestBoostNavigatorObserver());
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Boost example',
builder: FlutterBoost.init(postPush: _onRoutePushed),
home: Container(
color:Colors.white
));
}
void _onRoutePushed(
String pageName, String uniqueId, Map params, Route route, Future _) {
}
}
- 使用原生项目混合flutter的官方的混合方式即可，使用源码混合方式，修改podfile如下：可以很轻松的引入Flutter相应的framework
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
# 引入flutter链接
flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'iosflutter' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for iosflutter 将flutter工程产物导入该位置；这种方式就需要在本地有flutter那个项目，每次运行都需要git pull && pod install保证最新
install_all_flutter_pods(flutter_application_path)
# Basic pods
end
- 新建一个类，实现flutter_boost的协议，提供一些原生页面与native界面的push、pop和present、dismiss操作；这个类我们可以在flutter_boost的example中看见并根据项目需求加以修改即可。使用原生的push或present进行界面间跳转操作，如：
[self.navigationController presentViewController:vc animated:animated completion:^{
if(completion) completion(YES);
}];
使用如下方式获取flutter渲染的界面：
FLBFlutterViewContainer *vc = FLBFlutterViewContainer.new;
[vc setName:name params:params];
- 在AppDelegate中为flutter_boost提供一个跳转路由。其它如原生处理即可。
PlatformRouterImp *router = [PlatformRouterImp new];
[FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:router
onStart:^(FlutterEngine *engine) {
}];
- 可以愉快的编写dart代码了。并且可以再原生种进行测试：比如我想进行页面的跳转。就是这么简单。
[FlutterBoostPlugin open:@"second" urlParams:@{@"present":@(YES),kPageCallBackId:@"MycallbackId#2"} exts:@{@"animated":@(YES)} onPageFinished:^(NSDictionary *result) {
NSLog(@"call me when page finished, and your result is:%@", result);
} completion:^(BOOL f) {
NSLog(@"page is presented");
}];
使用Android Studio可以再plugin下载一个fish-redux插件，可以快速创建dart-redux模板，我们只需要按照需求编辑模板即可。创建模板的方式简单快捷。只需要输入一个Module Name即可。
模板创建出来最简单的模块如下： action.dart effect.dart page.dart reducer.dart view.dart
- 通常我们创建一个模板，第一步是实现它的UI，我们在上面介绍过，UI对应的事view.dart
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'action.dart';
import 'state.dart';
Widget buildView(EntranceState state, Dispatch dispatch, ViewService viewService) {
// return Container();
return Scaffold(
appBar: AppBar(
title: Text('Fish redux'),
backgroundColor: state.themeColor,
),
body: Container(
child: Center(
child: RaisedButton(
padding: EdgeInsets.fromLTRB(40, 0, 40, 0),
color: Colors.green,
child: Text(
state.showLabel,
style: TextStyle(color: Colors.orange),
),
onPressed: () {
// todo 点击事件
// dispatch(EntranceActionCreator.onChangeShowLabel());
dispatch(EntranceActionCreator.onOpenGrid());
},
),
),
),
);
}
- 在state中添加你自己需要的属性及是否继承全局属性等。
import 'dart:ui';
import 'package:fish_redux/fish_redux.dart';
import 'package:flutterappfishredux/store/state.dart';
// clone方法，用来获取state,在reducer用会用到来merge state合并状态
class EntranceState implements Cloneable<EntranceState>, GlobalBaseState {
// 定义一些用到的数据
String showLabel = '跳转';
int counter = 10;
@override
Color themeColor;
@override
EntranceState clone() {
return EntranceState()
..showLabel = showLabel
..counter = counter;
}
}
EntranceState initState(Map<String, dynamic> args) {
final EntranceState state = EntranceState();
return state;
}
- 在page中做状态、视图、事件、list驱动器的初始化和绑定操作
import 'package:fish_redux/fish_redux.dart';
// 代表一个界面
// 继承自component
// 使用FlutterRedexPlugin可以快速常见redux开发模板
import 'effect.dart'; // 处理副作用，负责state更新之外的事情
import 'reducer.dart'; // 接收action， 然后对数据做出修改，即更新状态(state)
import 'state.dart'; // 保存页面的状态，即存放数据；
import 'view.dart'; // 绘制的基本组件
//
class EntrancePage extends Page<EntranceState, Map<String, dynamic>> {
EntrancePage()
: super(
// 这是三要素
initState: initState, // 初始化数据存储位置
effect: buildEffect(), // 初始化除state更新之外的其它事情
view: buildView, // 基础页面
// reducer: buildReducer(), // 更新state
// dependencies: Dependencies<EntranceState>( // 未知
// adapter: null,
// slots: <String, Dependent<EntranceState>>{
// }),
// middleware: <Middleware<EntranceState>>[ // 页面私有AOP。如果需要
// ],
);
}
- 在action中使用enum定义时间，并且在ActionCreator中创建对应的action映射方法
import 'package:fish_redux/fish_redux.dart';
//TODO replace with your own action
enum EntranceAction { changeShowLabel, openGrid}
class EntranceActionCreator {
// 改变showLabel文案的方法，根据我的理解会映射到effect中
static Action onChangeShowLabel() {
print('调用修改文本方法onChangeShowLabel');
return const Action(EntranceAction.changeShowLabel);
}
static Action onOpenGrid() {
return const Action(EntranceAction.openGrid);
}
}
- 在effect和reducer中对功能进行实现
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart' hide Action;
import 'action.dart';
import 'state.dart';
// 页面初始化或异步请求这样的事件
// 接收并处理事件
Effect<EntranceState> buildEffect() {
return combineEffects(<Object, Effect<EntranceState>>{
EntranceAction.changeShowLabel: _onChangeShowLabel,
EntranceAction.openGrid: _onOpenGrid,
});
}
// 接收事件
void _onOpenGrid(Action action, Context<EntranceState> ctx) {
Navigator.of(ctx.context).pushNamed('grid_page', arguments: null);
}
// 修改方法
void _onChangeShowLabel(Action action, Context<EntranceState> ctx) {
ctx.state.showLabel = '你好';
}
====== reducer ======
import 'package:fish_redux/fish_redux.dart';
import 'action.dart';
import 'state.dart';
// 页面点击修改主题等
Reducer<EntranceState> buildReducer() {
return asReducer(
<Object, Reducer<EntranceState>>{
// EntranceAction.changeShowLabel: _onChangeShowLabel
},
);
}
集成方式非常简单，将flutter_boost对应的页面使用page提供的buildPage()方法，并传入params即可。
FlutterBoost.singleton.registerPageBuilders({
// 在flutter_boost的注册中，将实例方法改为由fish-redux创建的page的buildPage(params)方法。将数据传进去即可在原生中继续使用这种路由映射。
'HomePage': (name, params, _) => HomePage().buildPage(params)
})