直奔主題
最開始學(xué)習(xí)flutter的時候，我們可能把ui層和業(yè)務(wù)邏輯層寫在了一起笛厦，慢慢的dart文件越來越大，里面的邏輯也越來越復(fù)雜，然后我們就會想到左痢，是不是應(yīng)該把代碼重構(gòu)一遍了？
首先，代碼是盡量職責(zé)單一的才好俊性，這樣有問題也容易修改略步，不會牽一發(fā)而動全身，在開發(fā)android的時候定页，我用過mvp趟薄，用過mvvm，個人比較喜歡mvvm典徊，要說這兩個的區(qū)別杭煎，首先mvp模式是當(dāng)你獲取到數(shù)據(jù)以后，你需要自己控制如何刷新ui宫峦。而mvvm是把數(shù)據(jù)和ui綁定到了一起岔帽，當(dāng)你的數(shù)據(jù)改變的時候，ui自己就會改變导绷。這個區(qū)別是個人的理解犀勒，如有錯誤請糾正。
然后我們來說妥曲，如何在flutter中使用mvvm設(shè)計模式來讓ui層和業(yè)務(wù)邏輯層解耦贾费，我們先看一段沒有使用mvvm設(shè)計模式的代碼，所有代碼已經(jīng)上傳到了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設(shè)計模式的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("點擊重新獲取網(wǎng)絡(luò)數(shù)據(jù)"),
onPressed: () {
loadData();
},
),
Offstage(
offstage: !_loading,
child: CircularProgressIndicator(),
),
Expanded(
child: SingleChildScrollView(
child: Text("${_text ?? ""}"),
),
),
],
),
),
);
}
}
可以看到檐盟，進入頁面的時候褂萧，我們需要請求數(shù)據(jù)，獲取到數(shù)據(jù)以后葵萎，我們再調(diào)用setState刷新頁面导犹，然后就顯示出來了獲取到的數(shù)據(jù)，這段代碼功能是正常的羡忘，但是代碼不是優(yōu)雅的谎痢，因為ui層既需要控制如何顯示ui，又需要和業(yè)務(wù)層打交道卷雕，從業(yè)務(wù)層獲取數(shù)據(jù)后自己再更新ui节猿，這明顯違反了職責(zé)單一的原則，當(dāng)這種邏輯越來越多漫雕，以后維護就越來越困難滨嘱，然后我們來看一下，如何用mvvm設(shè)計模式重構(gòu)這段代碼
1. 首先我們創(chuàng)建一個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);
}
}
///獲取數(shù)據(jù)
@protected
Future refreshData(BuildContext context);
@protected
void doInit(BuildContext context);
void dispose();
}
這個類太雨，我封裝了基本所有viewModel都需要的一些方法，那個init方法的作用是為了保證doInit只執(zhí)行一次魁蒜，這樣做省去了所有子類都判斷一下是否已經(jīng)執(zhí)行過init囊扳，子類只需要重寫doInit就可以保證方法里的代碼只執(zhí)行一次煤墙。
2. 然后，我們創(chuàng)建一個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. 完成
是的就是這么簡單铣减，我們創(chuàng)建了2個類她君，就完成了我們的MVVM設(shè)計模式的框架
4. 使用
下面我們來看看，如何用這個mvvm的框架重構(gòu)我們剛才的代碼
4.1 先編寫我們的ViewModel類葫哗，這里我使用了rxdart缔刹，主要是BehaviorSubject可以保存最后一次發(fā)送的數(shù)據(jù)，不過這里沒有用到這個特性劣针，你就把它當(dāng)成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類校镐，用來和業(yè)務(wù)層交互
///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 然后我們來重構(gòu)首頁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設(shè)計模式的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("點擊重新獲取網(wǎng)絡(luò)數(shù)據(jù)"),
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}",
);
},
),
),
),
],
),
),
);
}
}
上面代碼的關(guān)鍵部分是通過ViewModelProvider.of(context);獲取到了上層Widget里的viewModel類實例，這部分的知識不是本文的終點襟己，不懂的請自己查詢一下相關(guān)知識引谜。
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的代碼可以在上面發(fā)過了贮预，在ViewModelProvider這個類里贝室，我們保存了viewModel的實例，在ViewModelProvider的build方法里仿吞，我們直接返回了傳入的child滑频，我們還定義了一個方法static T of<T extends BaseViewModel>(BuildContext context)，在這個方法里通過調(diào)用context.ancestorWidgetOfExactType找到了該類里的viewModel類屬性茫藏，所以在_HomePageState類里我們找到了傳入ViewModelProvider的viewModel误趴，然后可以用該viewModel來進行下一步操作。
文章到此講解結(jié)束务傲，在使用該種方式開發(fā)的過程中凉当，還能完美解決TabView隔tab點擊報錯的問題(用過的都知道我在說什么)，因為即使使用了AutomaticKeepAliveClientMixin售葡，挨個點擊tab的話沒問題看杭，但是隔著點的話還是有問題，我也找過很多方法挟伙，都不好用楼雹，但是該種方式可以解決該問題，因為是用StreamBuilder刷新的數(shù)據(jù)，而ViewModel保存在了上層widget贮缅，所以本widget重繪的時候上層widget的viewModel的實例并不會發(fā)生變化榨咐，數(shù)據(jù)還在Stream里，所以即使重新執(zhí)行了build方法谴供，也不會再次聯(lián)網(wǎng)請求數(shù)據(jù)块茁，只有我們手動給StreamController add數(shù)據(jù)的時候，才會將新數(shù)據(jù)給本widget來進行重繪桂肌。
