推荐一种简单的在Flutter中分离View与Model的方法

问题

我们在做Flutter开发的时候主要会在State中加入很多自己的业务逻辑&＃xff0c;例如网络请求&＃xff0c;数据处理等等&＃xff0c;如果你的业务逻辑比较复杂的话会面对着一个越来越膨胀的State。代码的可读性下降&＃xff0c;日后维护也越来越困难。这和我们在开发Android的时候遇到巨无霸Activity是同样的问题。解决办法就是分层解耦。Android从MVC进化到MVP/MVVM。Flutter 也有开发者把MVP引入到Flutter来解决这个问题。这里我们来看另一种比较简单的方法。

方法

我们先来看一下官方的那个原始的Counter例子&＃xff1a;

class _MyHomePageState extends State {int _counter &＃61; 0;void _incrementCounter() {setState(() {_counter&＃43;&＃43;;});}&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(&＃39;You have pushed the button this many times:&＃39;,),Text(&＃39;$_counter&＃39;,style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: &＃39;Increment&＃39;,child: Icon(Icons.add),), );}
}


可以看到&＃xff0c;在这个_MyHomePageState类中&＃xff0c;视图相关的代码都在build()这个函数体内&＃xff0c;数据属性_counter以及相关的函数_incrementCounter()都存在于同一个类中。可以想象一下&＃xff0c;如果你的页面比较复杂的话有可能会把部分视图相关的代码从build()中拆分出来放入类似getMyWidget()的函数&＃xff0c;View与Model混合在一起&＃xff0c;这个State将会变得难以维护。

为了将View与Model分离&＃xff0c;我们采取mixin这种办法。对mixin还不太了解的同学可以找相关的文章看一下。改造以后的代码如下&＃xff1a;

mixin _CounterStateMixin on State {int _counter &＃61; 0;void _incrementCounter() {setState(() {_counter&＃43;&＃43;;});}}class _CounterState extends State with _CounterStateMixin {&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(&＃39;Mixin, You have pushed the button this many times:&＃39;,),Text(&＃39;$_counter&＃39;,style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: &＃39;Increment&＃39;,child: Icon(Icons.add),),);}
}

首先新建一个mixin,这里命名为_CounterStateMixin&＃xff0c;把原来State中的_counter和_incrementCounter()挪到这个新的mixin里。

mixin _CounterStateMixin on State {int _counter &＃61; 0;void _incrementCounter() {setState(() {_counter&＃43;&＃43;;});}}


然后原来的State只需要混入这个mixin就好了。

class _CounterState extends State with _CounterStateMixin


这里我们就把View和Model分开了&＃xff0c;View相关的逻辑都在State中&＃xff0c;而Model相关的逻辑则都在StateMixin里。

是不是很简单&＃xff1f;如果用MVP或者其他方式来实现解耦的话很可能需要多创建几个类&＃xff0c;写很多模板代码&＃xff0c;引入第三方库&＃xff0c;甚至需要IDE插件的帮助。

另外一个优点就是副作用小&＃xff0c;我们都知道使用mixin的话在运行时可以认为完全和原来那个State是一致的。如果使用MVP的话你可能需要自己处理State的生命周期&＃xff0c;否则有可能会遇到内存泄漏或者空指针等问题。

另外&＃xff0c;这种方式也可以配合Provider等其他状态管理机制运行&＃xff0c;可以说十分友好了。

完整代码如下&＃xff0c;大家感兴趣可以试着跑一下试试&＃xff1a;

import &＃39;package:flutter/material.dart&＃39;;void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {&＃64;overrideWidget build(BuildContext context) {return MaterialApp(title: &＃39;Flutter Demo&＃39;,theme: ThemeData(primarySwatch: Colors.blue,),home: CounterPage(title: &＃39;Flutter Demo Home Page&＃39;),);}
}class CounterPage extends StatefulWidget {CounterPage({Key key, this.title}) : super(key: key);final String title;&＃64;override_CounterState createState() &＃61;> _CounterState();
}class _CounterState extends State with _CounterStateMixin {&＃64;overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text(&＃39;Mixin, You have pushed the button this many times:&＃39;,),Text(&＃39;$_counter&＃39;,style: Theme.of(context).textTheme.display1,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: &＃39;Increment&＃39;,child: Icon(Icons.add),),);}
}mixin _CounterStateMixin on State {int _counter &＃61; 0;void _incrementCounter() {setState(() {_counter&＃43;&＃43;;});}}

还有一点就是这个拆出来的StateMixin是可以复用的&＃xff0c;例如你想在页面上放两个功能相同但是显示不一样的counter&＃xff0c;让两个counter的State都混入同一个CounterStateMixin就可以了:

class _CounterPageState extends State with _CounterStateMixin class _NewCounterPage1State extends State with _CounterStateMixin


关于生命周期&＃xff0c;由于这个mixin是对State的扩展&＃xff0c;所以与生命周期相关的函数如initState()&＃xff0c;didUpdateWidget()&＃xff0c;dispose()等都可以在mixin中覆写&＃xff0c;例如说网络请求就可以放在StateMixin的initState()函数里。

总之&＃xff0c;我们的目的是View与Model分离&＃xff0c;所以要尽可能的把与视图相关的逻辑放在State中&＃xff0c;例如构建Widget树相关的逻辑&＃xff0c;动画相关的逻辑等。而与Model相关的逻辑则尽量放在StateMixin里&＃xff0c;例如网络请求等。

以上就是对使用mixin来实现Flutter中View与Model分离的介绍&＃xff0c;大家看完如果有什么想法欢迎评论。

作者&＃xff1a;ad6623
链接&＃xff1a;https://juejin.im/post/6844904168746926087
来源&＃xff1a;掘金
著作权归作者所有。商业转载请联系作者获得授权&＃xff0c;非商业转载请注明出处。