问题
我们在做Flutter开发的时候主要会在State中加入很多自己的业务逻辑，例如网络请求，数据处理等等，如果你的业务逻辑比较复杂的话会面对着一个越来越膨胀的State。代码的可读性下降，日后维护也越来越困难。这和我们在开发Android的时候遇到巨无霸Activity是同样的问题。解决办法就是分层解耦。Android从MVC进化到MVP/MVVM。Flutter 也有开发者把MVP引入到Flutter来解决这个问题。这里我们来看另一种比较简单的方法。
方法
我们先来看一下官方的那个原始的Counter例子：
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
可以看到，在这个_MyHomePageState类中，视图相关的代码都在build()这个函数体内，数据属性_counter以及相关的函数_incrementCounter()都存在于同一个类中。可以想象一下，如果你的页面比较复杂的话有可能会把部分视图相关的代码从build()中拆分出来放入类似getMyWidget()的函数，View与Model混合在一起，这个State将会变得难以维护。
为了将View与Model分离，我们采取mixin这种办法。对mixin还不太了解的同学可以找相关的文章看一下。改造以后的代码如下：
mixin _CounterStateMixin < T extends StatefulWidget> on State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
}
class _CounterState extends State with _CounterStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Mixin, You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
首先新建一个mixin,这里命名为_CounterStateMixin，把原来State中的_counter和_incrementCounter()挪到这个新的mixin里。
mixin _CounterStateMixin < T extends StatefulWidget> on State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
}
然后原来的State只需要混入这个mixin就好了。
class _CounterState extends State with _CounterStateMixin
这里我们就把View和Model分开了，View相关的逻辑都在State中，而Model相关的逻辑则都在StateMixin里。
是不是很简单？如果用MVP或者其他方式来实现解耦的话很可能需要多创建几个类，写很多模板代码，引入第三方库，甚至需要IDE插件的帮助。
另外一个优点就是副作用小，我们都知道使用mixin的话在运行时可以认为完全和原来那个State是一致的。如果使用MVP的话你可能需要自己处理State的生命周期，否则有可能会遇到内存泄漏或者空指针等问题。
另外，这种方式也可以配合Provider等其他状态管理机制运行，可以说十分友好了。
完整代码如下，大家感兴趣可以试着跑一下试试：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CounterPage(title: 'Flutter Demo Home Page'),
);
}
}
class CounterPage extends StatefulWidget {
CounterPage({Key key, this.title}) : super(key: key);
final String title;
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State with _CounterStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Mixin, You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
mixin _CounterStateMixin < T extends StatefulWidget> on State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
}
还有一点就是这个拆出来的StateMixin是可以复用的，例如你想在页面上放两个功能相同但是显示不一样的counter，让两个counter的State都混入同一个CounterStateMixin就可以了:
class _CounterPageState extends State with _CounterStateMixin
class _NewCounterPage1State extends State with _CounterStateMixin
关于生命周期，由于这个mixin是对State的扩展，所以与生命周期相关的函数如initState()，didUpdateWidget()，dispose()等都可以在mixin中覆写，例如说网络请求就可以放在StateMixin的initState()函数里。
总之，我们的目的是View与Model分离，所以要尽可能的把与视图相关的逻辑放在State中，例如构建Widget树相关的逻辑，动画相关的逻辑等。而与Model相关的逻辑则尽量放在StateMixin里，例如网络请求等。
以上就是对使用mixin来实现Flutter中View与Model分离的介绍，大家看完如果有什么想法欢迎评论。