直奔主題
最開始學習flutter的時候，我們可能把ui層和業務邏輯層寫在了一起，慢慢的dart文件越來越大，里面的邏輯也越來越復雜，然后我們就會想到，是不是應該把代碼重構一遍了？
首先，代碼是盡量職責單一的才好，這樣有問題也容易修改，不會牽一發而動全身，在開發android的時候，我用過mvp，用過mvvm，個人比較喜歡mvvm，要說這兩個的區別，首先mvp模式是當你獲取到數據以后，你需要自己控制如何刷新ui。而mvvm是把數據和ui綁定到了一起，當你的數據改變的時候，ui自己就會改變。這個區別是個人的理解，如有錯誤請糾正。
然后我們來說，如何在flutter中使用mvvm設計模式來讓ui層和業務邏輯層解耦，我們先看一段沒有使用mvvm設計模式的代碼，所有代碼已經上傳到了github
main.dart
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter MVVM Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePageNoMVVM(),
);
}
}
page_home_no_mvvm.dart
///沒有使用MVVM設計模式的Widget
///author:liuhc
class HomePageNoMVVM extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePageNoMVVM> {
bool _loading = true;
String _text;
@override
void initState() {
super.initState();
loadData();
}
void loadData() {
NetWork.query().then((String text) {
setState(() {
_loading = false;
_text = text;
});
}).catchError((error) {
setState(() {
_loading = false;
_text = error.toString();
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter沒有使用MVVM的示例"),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("點擊重新獲取網絡數據"),
onPressed: () {
loadData();
},
),
Offstage(
offstage: !_loading,
child: CircularProgressIndicator(),
),
Expanded(
child: SingleChildScrollView(
child: Text("${_text ?? ""}"),
),
),
],
),
),
);
}
}
可以看到，進入頁面的時候，我們需要請求數據，獲取到數據以后，我們再調用setState刷新頁面，然后就顯示出來了獲取到的數據，這段代碼功能是正常的，但是代碼不是優雅的，因為ui層既需要控制如何顯示ui，又需要和業務層打交道，從業務層獲取數據后自己再更新ui，這明顯違反了職責單一的原則，當這種邏輯越來越多，以后維護就越來越困難，然后我們來看一下，如何用mvvm設計模式重構這段代碼
1. 首先我們創建一個ViewModel的基類
abstract_base_viewmodel.dart
import 'package:flutter/widgets.dart';
///所有viewModel的父類，提供一些公共功能
///author:liuhc
abstract class BaseViewModel {
bool _isFirst = true;
bool get isFirst=>_isFirst;
@mustCallSuper
void init(BuildContext context) {
if (_isFirst) {
_isFirst = false;
doInit(context);
}
}
///獲取數據
@protected
Future refreshData(BuildContext context);
@protected
void doInit(BuildContext context);
void dispose();
}
這個類，我封裝了基本所有viewModel都需要的一些方法，那個init方法的作用是為了保證doInit只執行一次，這樣做省去了所有子類都判斷一下是否已經執行過init，子類只需要重寫doInit就可以保證方法里的代碼只執行一次。
2. 然后，我們創建一個Widget，這個Widget里，有一個類屬性為ViewModel的實例
viewmodel_provider.dart
import 'package:flutter/material.dart';
import 'package:flutter_mvvm/core/abstract_base_viewmodel.dart';
///提供viewModel的widget
///author:liuhc
class ViewModelProvider<T extends BaseViewModel> extends StatefulWidget {
final T viewModel;
final Widget child;
ViewModelProvider({
@required this.viewModel,
@required this.child,
});
static T of<T extends BaseViewModel>(BuildContext context) {
final type = _typeOf<ViewModelProvider<T>>();
ViewModelProvider<T> provider = context.ancestorWidgetOfExactType(type);
return provider.viewModel;
}
static Type _typeOf<T>() => T;
@override
_ViewModelProviderState createState() => _ViewModelProviderState();
}
class _ViewModelProviderState extends State<ViewModelProvider> {
@override
Widget build(BuildContext context) {
return widget.child;
}
@override
void dispose() {
widget.viewModel.dispose();
super.dispose();
}
}
3. 完成
是的就是這么簡單，我們創建了2個類，就完成了我們的MVVM設計模式的框架
4. 使用
下面我們來看看，如何用這個mvvm的框架重構我們剛才的代碼
4.1 先編寫我們的ViewModel類，這里我使用了rxdart，主要是BehaviorSubject可以保存最后一次發送的數據，不過這里沒有用到這個特性，你就把它當成StreamController就可以了
viewmodel_home.dart
import 'package:flutter/material.dart';
import 'package:flutter_mvvm/core/abstract_base_viewmodel.dart';
import 'package:flutter_mvvm/core/network.dart';
import 'package:rxdart/rxdart.dart';
///首頁ViewModel類，用來和業務層交互
///author:liuhc
class HomeViewModel extends BaseViewModel {
// ignore: close_sinks
BehaviorSubject<String> _dataObservable = BehaviorSubject();
Stream<String> get dataStream => _dataObservable.stream;
@override
void dispose() {
_dataObservable.close();
}
@override
void doInit(BuildContext context) {
refreshData(context);
}
@override
Future refreshData(BuildContext context) {
//個人比較喜歡這樣寫，不然要寫try catch來包裹代碼，try catch不如這樣寫起來方便，不用一直定義變量
return NetWork.query().then((String text) {
_dataObservable.add(text);
}).catchError((error) {
_dataObservable.addError(error);
});
}
}
4.2 然后我們來重構首頁Widget
page_home.dart
import 'package:flutter/material.dart';
import 'package:flutter_mvvm/core/viewmodel_provider.dart';
import 'package:flutter_mvvm/page/home/viewmodel_home.dart';
///使用MVVM設計模式的Widget
///author:liuhc
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
HomeViewModel _viewModel;
@override
void initState() {
super.initState();
_viewModel = ViewModelProvider.of(context);
_viewModel.init(context);
}
@override
void dispose() {
_viewModel.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter使用MVVM的示例"),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("點擊重新獲取網絡數據"),
onPressed: () {
_viewModel.refreshData(context);
},
),
Expanded(
child: SingleChildScrollView(
child: StreamBuilder(
stream: _viewModel.dataStream,
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
return Text(
"${snapshot.hasError ? snapshot.error : snapshot.data}",
);
},
),
),
),
],
),
),
);
}
}
上面代碼的關鍵部分是通過ViewModelProvider.of(context);獲取到了上層Widget里的viewModel類實例，這部分的知識不是本文的終點，不懂的請自己查詢一下相關知識。
4.3 然后我們修改程序入口，看一下如何把首頁Widget和首頁ViewModel綁定到一起的
main.dart
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter MVVM Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ViewModelProvider(
viewModel: HomeViewModel(),
child: HomePage(),
),
);
}
}
在上面的代碼里，我們的home沒有直接傳遞HomePage()，而是傳遞的ViewModelProvider，ViewModelProvider的代碼可以在上面發過了，在ViewModelProvider這個類里，我們保存了viewModel的實例，在ViewModelProvider的build方法里，我們直接返回了傳入的child，我們還定義了一個方法static T of<T extends BaseViewModel>(BuildContext context)，在這個方法里通過調用context.ancestorWidgetOfExactType找到了該類里的viewModel類屬性，所以在_HomePageState類里我們找到了傳入ViewModelProvider的viewModel，然后可以用該viewModel來進行下一步操作。
文章到此講解結束，在使用該種方式開發的過程中，還能完美解決TabView隔tab點擊報錯的問題(用過的都知道我在說什么)，因為即使使用了AutomaticKeepAliveClientMixin，挨個點擊tab的話沒問題，但是隔著點的話還是有問題，我也找過很多方法，都不好用，但是該種方式可以解決該問題，因為是用StreamBuilder刷新的數據，而ViewModel保存在了上層widget，所以本widget重繪的時候上層widget的viewModel的實例并不會發生變化，數據還在Stream里，所以即使重新執行了build方法，也不會再次聯網請求數據，只有我們手動給StreamController add數據的時候，才會將新數據給本widget來進行重繪。
