寫在前面
Flutter 是 Google推出并開源的移動(dòng)應(yīng)用開發(fā)框架典蜕，主打跨平臺、高保真罗洗、高性能愉舔。開發(fā)者可以通過 Dart語言開發(fā) App，一套代碼同時(shí)運(yùn)行在 iOS 和 Android平臺伙菜。
Flutter官網(wǎng)：https://flutter-io.cn
還記得18年參加上海Google開發(fā)者大會(huì)的時(shí)候轩缤，聽了一天的Flutter的介紹，之后不久1.0發(fā)布了贩绕，到現(xiàn)在1.2版本火的，F(xiàn)lutter一直都在快速的進(jìn)步著。年后我也終于開始了Flutter的深入學(xué)習(xí)淑倾，并很快有機(jī)會(huì)直接在項(xiàng)目中進(jìn)行實(shí)踐馏鹤。
如果你也是剛開始學(xué)習(xí)Flutter，推薦以下資源：
- IDE：Android Studio 娇哆，相比VS Code 具備更多的debug工具湃累，更好的代碼提示和跳轉(zhuǎn)勃救，畢竟都是Google自家的東西。
- 起步：編寫你的第一個(gè) Flutter App
- 入門：Flutter In Action
- 狀態(tài)管理：ScopeModel脱茉、redux剪芥、Bloc、Provide琴许∷胺荆可以查看Vadaski老哥的文章。
- 實(shí)踐：重構(gòu)現(xiàn)有項(xiàng)目的一個(gè)頁面榜田，并嘗試集成到原生項(xiàng)目中益兄。
- 深入：查看源碼并知曉Flutter運(yùn)行原理。
MVVM-Flutter
項(xiàng)目架構(gòu)當(dāng)然是MVVM箭券，依舊遵循App開發(fā)架構(gòu)指南净捅。對比以前寫的MVVM-Android，發(fā)現(xiàn)有許多的共通之處辩块，將依賴替換成Flutter版本之后就是熟悉的節(jié)奏蛔六。
項(xiàng)目地址：https://github.com/ditclear/mvvm_flutter
dependencies
- dio : 網(wǎng)絡(luò)請求
- rxdart：響應(yīng)式編程
- flutter-provide：通知ui更新數(shù)據(jù)
思想：M-V-VM各層直接通過rx銜接，配合響應(yīng)式的思想和rxdart的操作符進(jìn)行邏輯處理废亭，最后通過provide來更新視圖国章。
Code
//remote
class GithubService{
Observable<dynamic> login()=> get("user");
}
//repo
class GithubRepo {
final GithubService _remote;
GithubRepo(this._remote);
Observable login(String username, String password) {
token = "basic " + base64Encode(utf8.encode('$username:$password'));
return _remote.login();
}
}
//viewmodel
class HomeViewModel extends ChangeNotifier {
final GithubRepo _repo; //數(shù)據(jù)倉庫
String username = ""; //賬號
String password = ""; //密碼
bool _loading = false; // 加載中
String _response = ""; //響應(yīng)數(shù)據(jù)
//...
HomeViewModel(this._repo);
/**
* 調(diào)用model層的方法進(jìn)行登錄
* doOnData : 請求成功時(shí)，處理響應(yīng)數(shù)據(jù)
* doOnError : 請求失敗時(shí)豆村，處理錯(cuò)誤
* doOnListen ： 開始時(shí)loading為true,通知ui更新
* doOnDone ： 結(jié)束時(shí)loading為false,通知ui更新
*/
Observable login() => _repo
.login(username, password)
.doOnData((r) => response = r.toString())
.doOnError((e, stacktrace) {
if (e is DioError) {
response = e.response.data.toString();
}
})
.doOnListen(() => loading = true)
.doOnDone(() => loading = false);
}
//view
class HomeWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomeState(provideHomeViewModel());
}
}
class _HomeState extends State<HomeWidget>{
//...
_HomeState(this._viewModel) {
providers.provideValue(_viewModel);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appbar://...,
body://...
CupertinoButton(
onPressed: _login,
//...
),
Container(
//...
child: Provide<HomeViewModel>(
builder: (BuildContext context, Widget child,
HomeViewModel value) =>
Text(value.response),
),
),
//...
);
}
_login()=>_viewModel.login().doOnListen(() {
_controller.forward();
}).doOnDone(() {
_controller.reverse();
}).listen((_) {
//success
Toast.show("login success",context,type: Toast.SUCCESS);
}, onError: (e) {
//error
dispatchFailure(context, e);
});
}
最后效果：
下載體驗(yàn)
寫在最后
Flutter上手還是蠻容易的液兽，大概一周的時(shí)間就能熟悉，畢竟很多東西Flutter團(tuán)隊(duì)都幫你弄好了掌动。
而且hot reload真的舒服四啰，一次編寫，兩端運(yùn)行粗恢。當(dāng)然缺點(diǎn)也是有的柑晒，比如：
- 插件質(zhì)量較低（畢竟才起步，相信以后會(huì)完善）
- json解析真的煩（遠(yuǎn)不如kotlin簡單,而且沒有擴(kuò)展）
- 布局層次較多（配上flutter dev tool 眷射，在可接受范圍內(nèi)）
總的來說敦迄，我愿意在Flutter上投入時(shí)間，相信也能得到相應(yīng)的回報(bào)凭迹，畢竟都9102年了，是吧?
如果你想了解更多關(guān)于MVVM苦囱、Flutter嗅绸、響應(yīng)式編程方面的知識，歡迎關(guān)注我撕彤。
你可以在以下地方找到我：
簡書：http://www.reibang.com/u/117f1cf0c556
掘金：https://juejin.im/user/582d601d2e958a0069bbe687
Github: https://github.com/ditclear
