MVC、MVP、BloC、Redux四种架构在Flutter上的尝试

}

static final model = Model();

static bool get isLoading => model.isLoading;

static UserBean get userBean => model.userBean;

Future login(State state, String name, String password) async {
state.setState(() {
_showLoading();
});

await model.login(name, password);

state.setState(() {
_hideLoading();
});
}

void _showLoading() {
model.showLoading();
}

void _hideLoading() {
model.hideLoading();
}
}

定义Model层

Model层主要进行登录、获取用户资料的网络请求，并保存loading状态以及用户资料，相关代码如下所示

class Model {
bool get isLoading => _isLoading;
bool _isLoading = false;

UserBean get userBean => _userBean;
UserBean _userBean;

Future login(String name, String password) async {
final login = await LoginManager.instance.login(name, password);
//授权成功
if (login != null) {
final user = await LoginManager.instance.getMyUserInfo();
_userBean = user;
}
return;
}

void showLoading() {
_isLoading = true;
}

void hideLoading() {
_isLoading = false;
}
}

网络层的相关代码就不再贴出，感兴趣的可以在本文末尾下载源码进行查看。

由上面代码可知，当View层触发登录时，调用了Control层login接口，在该接口内，实现了展示loading状态，并等待登录的网络请求，当请求完成后，则取消loading状态，最终交给View层进行数据处理，相关处理的代码如下所示

_login() async {
String name = _nameController.text;
String password = _passwordController.text;

await Con.instance.login(this, name, password);

if (Con.userBean != null) {
NavigatorUtil.goHome(context, Con.userBean);
} else {
ToastUtil.showToast(‘登录失败，请重新登录’);
}
}

到此，MVC整个框架的登录流程已进行完成。

MVP

该架构是在进行Android开发时，是一种比较常用的架构。

架构视图

程序入口

main.dart是程序的入口，完成登录界面的启动，相关代码如下所示

void main() => runApp(MVPApp());

class MVPApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.black,
),
home: LoginPage(),
);
}
}

登录流程

与MVC一致，可以参考MVC。

文本监听

与MVC一致，可以参考MVC。

清空账号输入框

与MVC一致，可以参考MVC。

密码是否可见

与MVC一致，可以参考MVC。

触发登录

View层点击登录按钮，触发Presenter层登录逻辑，在Presenter层通过View层提供的接口来控制loading界面的展示和隐藏，loading UI相关代码如下所示

Offstage(
offstage: !isLoading,
child: new Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.black54,
child: new Center(
child: SpinKitCircle(
color: Theme.of(context).primaryColor,
size: 25.0,
),
),
),
),

上面代码中的isLoading状态已在基类中做了统一封装，下面对MVP做定义封装。

封装View层

触发网络请求，需要满足展示和隐藏loading界面，所以View的对外需要提供这两个最基本的接口，如下面代码所示

abstract class IBaseView {
showLoading();

hideLoading();
}

封装Presenter层

Presenter层的公共接口只需提供对View层的注册以及反注册，如下面代码所示

abstract class IBasePresenter {
void onAttachView(V view);

void onDetachView();
}

下面对Presenter层的代码实现上面所提供的接口，如下面代码所示

abstract class BasePresenter extends IBasePresenter {
V view;

@override
void onAttachView(IBaseView view) {
this.view = view;
}

@override
void onDetachView() {
this.view = null;
}
}

封装State基类

在State基类中，需要提供Presenter的初始化的方法、loading状态、数据初始化以及视图的构建等，如下面代码所示

abstract class BaseState<T extends StatefulWidget, P extends BasePresenter,
V extends IBaseView> extends State implements IBaseView {
P presenter;

bool isLoading = false;

P initPresenter();

Widget buildBody(BuildContext context);

void initData() {
}

@override
void initState() {
super.initState();
presenter = initPresenter();
if (presenter != null) {
presenter.onAttachView(this);
}
initData();
}

@override
void dispose() {
super.dispose();
if (presenter != null) {
presenter.onDetachView();
presenter = null;
}
}

@override
@mustCallSuper
Widget build(BuildContext context) {
return new Scaffold(
body: buildBody(context),
);
}

@override
void showLoading() {
setState(() {
isLoading = true;
});
}

@override
void hideLoading() {
setState(() {
isLoading = false;
});
}
}

到此，MVP框架已经封装完，下面只需对登录界面做相应的实现即可。

实现登录逻辑

在进行登录时，Presenter层需要向View层提供登录接口，当进行登录完毕后，需要向View层进行登录状态的反馈，所以View需要提供登录成功、失败两个接口，如下面代码所示

abstract class ILoginPresenter extends BasePresenter {
void login(String name, String password);
}

abstract class ILoginView extends IBaseView {
void onLoginSuccess(UserBean userBean);

void onLoginFailed();
}

当相关接口定义完毕后，首先实现登录的Presenter层的代码，如下面代码所示

class LoginPresenter extends ILoginPresenter {
@override
void login(String name, String password) async {
if (view != null) {
view.showLoading();
}
final login = await LoginManager.instance.login(name, password);
//授权成功
if (login != null) {
final user = await LoginManager.instance.getMyUserInfo();
if (user != null) {
if (view != null) {
view.hideLoading();
view.onLoginSuccess(user);
} else {
view.hideLoading();
view.onLoginFailed();
}
}
} else {
if (view != null) {
view.hideLoading();
view.onLoginFailed();
}
}
}
}

然后对登录State的代码进行实现，如下面代码所示

class _LoginPageState extends BaseState<LoginPage, LoginPresenter, ILoginView>
implements ILoginView {

@override
void initData() {
super.initData();
}

@override
Widget buildBody(BuildContext context) {
return null;
}

@override
LoginPresenter initPresenter() {
return LoginPresenter();
}

@override
void onLoginSuccess(UserBean userBean) {
NavigatorUtil.goHome(context, userBean);
}

@override
void onLoginFailed() {
ToastUtil.showToast(‘登录失败，请重新登录’);
}
}

相关代码已经封装完毕，最后只需调用登录相关逻辑，如下面代码所示

_login() {
if (presenter != null) {
String name = _nameController.text;
String password = _passwordController.text;
presenter.login(name, password);
}
}

BloC

关于什么是BloC，可以参考[Flutter Package]状态管理之BLoC的封装和Flutter | 状态管理探索篇——BLoC(三)。

架构视图

程序入口

main.dart是程序的入口，完成登录界面的启动，相关代码如下所示

void main() => runApp(BlocApp());

class BlocApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.black,
),
home: BlocProvider(
child: LoginPage(),
bloc: LoginBloc(),
),
);
}
}

上面代码跟MVC和MVP有不同之处，传入home的对象是BlocProvider，且其包含了child和bloc实例。如下面代码所示

class BlocProvider extends StatefulWidget {
final T bloc;
final Widget child;

BlocProvider({
Key key,
@required this.child,
@required this.bloc,
}) : super(key: key);

@override
_BlocProviderState createState() {
return _BlocProviderState();
}

static T of(BuildContext context) {
final type = _typeOf<BlocProvider>();
BlocProvider provider = context.ancestorWidgetOfExactType(type);
return provider.bloc;
}

static Type _typeOf() => T;
}

class _BlocProviderState extends State<BlocProvider> {
static final String TAG = “_BlocProviderState”;

@override
void initState() {
super.initState();
LogUtil.v('initState ’ + T.toString(), tag: TAG);
}

@override
Widget build(BuildContext context) {
LogUtil.v('build ’ + T.toString(), tag: TAG);
return widget.child;
}

@override
void dispose() {
super.dispose();
LogUtil.v('dispose ’ + T.toString(), tag: TAG);
widget.bloc.dispose();
}
}

登录流程

BLoC能够允许我们分离业务逻辑，不用考虑什么时候需要刷新屏幕，一切交给StreamBuilder和BLoC就可以完成，所以登录页面继承StatelessWidget即可。如下面代码所示

class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: bloc.stream,
initialData: initialData(),
builder: (BuildContext context,
AsyncSnapshot<LoadingBean> snapshot) {
}
);
}
}

• stream代表了这个stream builder监听的流，这里监听的是LoginBloc的stream；
• initData代表初始的值，因为在首次渲染的时候，还未与用户产生交互，也就不会有事件从流中流出，所以需要给首次渲染一个初始值；
• builder函数接收一个位置参数BuildContext和一个snapshot，snapshot就是这个流输出的数据的一个快照，我们可以通过snapshot.data访问快照中的数据，StreamBuilder中的builder是一个AsyncWidgetBuilder，它能够异步构建widget，当检测到有数据从流中流出时，将会重新构建。

创建BloC

首先完成BloC基类的封装，基类需要只需要满足登录状态，如下面代码所示

class LoadingBean {
bool isLoading;
T data;

LoadingBean({this.isLoading, this.data});

@override
String toString() {
return ‘LoadingBean{isLoading: $isLoading, data: $data}’;
}
}

abstract class BaseBloc {
static final String TAG = “BaseBloc”;

BehaviorSubject _subject = BehaviorSubject();

Sink get sink => _subject.sink;

Stream get stream => _subject.stream;

void dispose() {
_subject.close();
sink.close();
}
}

创建BloC实例

在登录的BloC实例中，完成整个登录过程，我们需要监听账号、密码的输入状态，密码的是否可见状态，以及登录状态，如下面代码所示

class LoginBloc extends BaseBloc<LoadingBean> {
LoadingBean bean;

LoginBloc() {
bean = LoadingBean(
isLoading: false,
data: LoginBlocBean(
name: ‘’,
password: ‘’,
obscure: true,
),
);
}

changeObscure() {
}

changeName(String name) {
}

changePassword(String password) {
}

login(BuildContext context) async {
}

void _showLoading() {
bean.isLoading = true;
sink.add(bean);
}

void _hideLoading() {
bean.isLoading = false;
sink.add(bean);
}
}

文本监听

创建账号和密码两个TextEditingController实例，并完成其事件监听，如下面代码所示

final TextEditingController _nameController = new TextEditingController();
final TextEditingController _passwordController = new TextEditingController();

LoginBloc bloc = BlocProvider.of(context);

_nameController.addListener(() {
bloc.changeName(_nameController.text);
});
_passwordController.addListener(() {
bloc.changePassword(_passwordController.text);
});

当文本发生改变时，会调用LoginBloc里相应的改变方法，并对相应的文本进行重新复杂，在通过sink.add()更新界面，如下面代码所示

changeName(String name) {
bean.data.name = name;
sink.add(bean);
}

changePassword(String password) {
bean.data.password = password;
sink.add(bean);
}

清空账号输入框

与MVC一致，可以参考MVC。

密码是否可见

需要改变可见状态，调用LoginBloc中的changeObscure方法，如下面代码所示

changeObscure() {
bean.data.obscure = !bean.data.obscure;
sink.add(bean);
}

触发登录

需要进行网络请求，控制loading的展示和隐藏，这里需要调用LoginBloc中的login方法，当登录成功后，则跳转主页展示基本信息，不成功则toast提示，如下面代码所示

login(BuildContext context) async {
_showLoading();

final login =
await LoginManager.instance.login(bean.data.name, bean.data.password);
//授权成功
if (login != null) {
final user = await LoginManager.instance.getMyUserInfo();
if (user != null) {
NavigatorUtil.goHome(context, user);
} else {
ToastUtil.showToast(‘登录失败，请重新登录’);
}
} else {
ToastUtil.showToast(‘登录失败，请重新登录’);
}

_hideLoading();
}

Redux

Redux是网页开发着广泛使用的设计模式，比如用在React.js中。关于它的介绍可以参考文章Flutter主题切换之flutter redux。

架构视图

程序入口

main.dart是程序的入口，完成登录界面的启动，相关代码如下所示

void main() {
final store = new Store(
appReducer,
initialState: AppState.initial(),
middleware: [
LoginMiddleware(),
],
);

runApp(
ReduxApp(
store: store,
),
);
}

class ReduxApp extends StatelessWidget {
final Store store;

const ReduxApp({Key key, this.store}) : super(key: key);

@override
Widget build(BuildContext context) {
return StoreProvider(
store: store,
child: StoreConnector<AppState, _ViewModel>(
converter: _ViewModel.fromStore,
builder: (context, vm) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.black,
),
home: LoginPage(),
);
},
),
);
}
}

class _ViewModel {
_ViewModel();

static _ViewModel fromStore(Store store) {
return _ViewModel();
}
}

在程序的入口处，对Store进行了初始化工作，完成了对reducer、state、middleware初始化工作。

定义action

完成登录需要有请求登录、请求加载中、请求错误、请求成功等几个状态，如下面代码所示

class FetchLoginAction {
final BuildContext context;
final String userName;
final String password;

FetchLoginAction(this.context, this.userName, this.password);
}

class ReceivedLoginAction {
ReceivedLoginAction(
this.token,
this.userBean,
);

final String token;
final UserBean userBean;
}

class RequestingLoginAction {}

class ErrorLoadingLoginAction {}

初始化state

目前只有一个登录功能，所以只需一个登录的state，如下面代码所示

class AppState {
final LoginState loginState;

AppState({
this.loginState,
});

factory AppState.initial() => AppState(
loginState: LoginState.initial(),
);
}

class LoginState {
final bool isLoading;
final String token;

LoginState({this.isLoading, this.token});

factory LoginState.initial() {
return LoginState(
isLoading: false,
token: ‘’,
);
}

LoginState copyWith({bool isLoading, String token}) {
return LoginState(
isLoading: isLoading ?? this.isLoading,
token: token ?? this.token,
);
}
}

初始化reducer

目前只有一个登录功能，所以只需一个登录的reducer，如下面代码所示

AppState appReducer(AppState state, action) {
return AppState(
loginState: loginReducer(state.loginState, action),
);
}

final loginReducer = combineReducers([
TypedReducer<LoginState, RequestingLoginAction>(_requestingLogin),
TypedReducer<LoginState, ReceivedLoginAction>(_receivedLogin),
TypedReducer<LoginState, ErrorLoadingLoginAction>(_errorLoadingLogin),
]);

初始化middleware

登录的中间件暂时只对其做个简单的初始化过程，如下面代码所示

class LoginMiddleware extends MiddlewareClass {
static final String TAG = “LoginMiddleware”;

@override
void call(Store store, action, NextDispatcher next) {
}
}

登录流程

Redux能够允许我们分离业务逻辑，不用考虑什么时候需要刷新屏幕，一切交给StoreConnector可以完成，所以登录页面继承StatelessWidget即可。如下面代码所示

class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StoreConnector<AppState, LoginPageViewModel>(
distinct: true,
converter: (store) => LoginPageViewModel.fromStore(store, context),
builder: (_, viewModel) => LoginPageContent(viewModel),
);
}
}

LoginPageViewModel只负责登录状态以及登录行为，如下面代码所示

typedef OnLogin = void Function(String name, String password);

class LoginPageViewModel {
static final String TAG = “LoginPageViewModel”;

final OnLogin onLogin;
final bool isLoading;

LoginPageViewModel({this.onLogin, this.isLoading});

static LoginPageViewModel fromStore(
Store store, BuildContext context) {
return LoginPageViewModel(
isLoading: store.state.loginState.isLoading,
onLogin: (String name, String password) {
LogUtil.v(‘name is $name, password is $password’, tag: TAG);
store.dispatch(FetchLoginAction(context, name, password));
},
);
}
}

文本监听

与MVC一致，可以参考MVC。

清空账号输入框

与MVC一致，可以参考MVC。

密码是否可见

与MVC一致，可以参考MVC。

触发登录

在进行登录时，我们只需调用LoginPageViewModel内的onLogin方法，该方法会通过store分发出FetchLoginAction，此时中间件LoginMiddleware会收到该行为，并对其进行处理。

@override
void call(Store store, action, NextDispatcher next) {
next(action);
if (action is FetchLoginAction) {
_doLogin(next, action.context, action.userName, action.password);
}
}

上面对收到的行为继续分发出去，如果是自己感兴趣的行为，就自己进行操作，处理FetchLoginAction行为，相关代码如下所示

Future _doLogin(NextDispatcher next, BuildContext context,
String userName, String password) async {
next(RequestingLoginAction());

try {
LoginBean loginBean =
await LoginManager.instance.login(userName, password);
if (loginBean != null) {
String token = loginBean.token;
LoginManager.instance.setToken(loginBean.token, true);
UserBean userBean = await LoginManager.instance.getMyUserInfo();
if (userBean != null) {
next(ReceivedLoginAction(token, userBean));
NavigatorUtil.goHome(context, userBean);
} else {
ToastUtil.showToast(‘登录失败请重新登录’);
LoginManager.instance.setToken(null, true);
}
} else {
ToastUtil.showToast(‘登录失败请重新登录’);
next(ErrorLoadingLoginAction());
}
} catch (e) {
LogUtil.v(e, tag: TAG);
ToastUtil.showToast(‘登录失败请重新登录’);
next(ErrorLoadingLoginAction());
}
}

在进行登录的过程中，最初会发出正在请求的行为RequestingLoginAction，当登录成功后也会发出行为ReceivedLoginAction，登录失败后发出行为ErrorLoadingLoginAction，而这些发出的行为都会被reducer收到，并对数据进行处理，在通知UI刷新。loginReducer相关处理逻辑如下面代码所示

LoginState _requestingLogin(LoginState state, action) {
LogUtil.v(‘_requestingLogin’, tag: TAG);
return state.copyWith(isLoading: true);
}

LoginState _receivedLogin(LoginState state, action) {
LogUtil.v(‘_receivedLogin’, tag: TAG);
return state.copyWith(isLoading: false, token: action.token);
}

LoginState _errorLoadingLogin(LoginState state, action) {
LogUtil.v(‘_errorLoadingLogin’, tag: TAG);
return state.copyWith(isLoading: false);
}

总结

局部状态和全局状态

上面的登录例子中，登录表单的任何验证类型，都可以考虑为局部状态，因为这些规则仅适用于这个组件，而App的其他部分不需要知道这个类型。但是从后台获取的token和用户资料，就需要考虑成全局状态，因为它影响整个app的作用域（未登录和已登陆），而且可能别的组件会依赖它。

选择

对比上面四种架构的好坏，最终还是的回归到状态管理上来。MVC、MVP的状态管理都是采用setState方式，而BloC和Redux都有自己的一套状态管理。
当项目最初不是很复杂的时候，采用setState方式更新数据是可以的。但是随着功能的增加，你的项目将会有几十个甚至上百个状态，setState出现的次数便会显著增加，每次setState都会重新调用build方法，这势必对于性能以及代码的可阅读性带来一定的影响。所以就放弃了MVC、MVP这两种架构。
理逻辑如下面代码所示

LoginState _requestingLogin(LoginState state, action) {
LogUtil.v(‘_requestingLogin’, tag: TAG);
return state.copyWith(isLoading: true);
}

LoginState _receivedLogin(LoginState state, action) {
LogUtil.v(‘_receivedLogin’, tag: TAG);
return state.copyWith(isLoading: false, token: action.token);
}

LoginState _errorLoadingLogin(LoginState state, action) {
LogUtil.v(‘_errorLoadingLogin’, tag: TAG);
return state.copyWith(isLoading: false);
}

总结

局部状态和全局状态

上面的登录例子中，登录表单的任何验证类型，都可以考虑为局部状态，因为这些规则仅适用于这个组件，而App的其他部分不需要知道这个类型。但是从后台获取的token和用户资料，就需要考虑成全局状态，因为它影响整个app的作用域（未登录和已登陆），而且可能别的组件会依赖它。

选择

对比上面四种架构的好坏，最终还是的回归到状态管理上来。MVC、MVP的状态管理都是采用setState方式，而BloC和Redux都有自己的一套状态管理。
当项目最初不是很复杂的时候，采用setState方式更新数据是可以的。但是随着功能的增加，你的项目将会有几十个甚至上百个状态，setState出现的次数便会显著增加，每次setState都会重新调用build方法，这势必对于性能以及代码的可阅读性带来一定的影响。所以就放弃了MVC、MVP这两种架构。