問題
我們在做Flutter開發的時候主要會在State中加入很多自己的業務邏輯，例如網絡請求，數據處理等等，如果你的業務邏輯比較複雜的話會面對着一個越來越膨脹的State。代碼的可讀性下降，日後維護也越來越困難。這和我們在開發Android的時候遇到巨無霸Activity是同樣的問題。解決辦法就是分層解耦。Android從MVC進化到MVP/MVVM。Flutter 也有開發者把MVP引入到Flutter來解決這個問題。這裏我們來看另一種比較簡單的方法。
方法
我們先來看一下官方的那個原始的Counter例子：
class _MyHomePageState extends State<MyHomePage> {
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: <Widget>[
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<T> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
}
class _CounterState extends State<CounterPage> with _CounterStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
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<T> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
}
然後原來的State只需要混入這個mixin就好了。
class _CounterState extends State<CounterPage> 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<CounterPage> with _CounterStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
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<T> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
}
還有一點就是這個拆出來的StateMixin是可以複用的，例如你想在頁面上放兩個功能相同但是顯示不一樣的counter，讓兩個counter的State都混入同一個CounterStateMixin就可以了:
class _CounterPageState extends State<CounterPage> with _CounterStateMixin
class _NewCounterPage1State extends State<NewCounterPage> with _CounterStateMixin
關於生命週期，由於這個mixin是對State的擴展，所以與生命週期相關的函數如initState()，didUpdateWidget()，dispose()等都可以在mixin中覆寫，例如說網絡請求就可以放在StateMixin的initState()函數裏。
總之，我們的目的是View與Model分離，所以要儘可能的把與視圖相關的邏輯放在State中，例如構建Widget樹相關的邏輯，動畫相關的邏輯等。而與Model相關的邏輯則儘量放在StateMixin裏，例如網絡請求等。
以上就是對使用mixin來實現Flutter中View與Model分離的介紹，大家看完如果有什麼想法歡迎評論。