MVVM架構在Flutter中的簡單實踐

ditclear發表於2019-03-09
MVVM架構Flutter

寫在前面

Flutter 是 Google推出並開源的移動應用開發框架，主打跨平臺、高保真、高效能。開發者可以通過 Dart語言開發 App，一套程式碼同時執行在 iOS 和 Android平臺。

Flutter官網：https://flutter-io.cn

還記得18年參加上海Google開發者大會的時候，聽了一天的Flutter的介紹，之後不久1.0釋出了，到現在1.2版本，Flutter一直都在快速的進步著。年後我也終於開始了Flutter的深入學習，並很快有機會直接在專案中進行實踐。

如果你也是剛開始學習Flutter，推薦以下資源：

  • IDE：Android Studio ，相比VS Code 具備更多的debug工具，更好的程式碼提示和跳轉，畢竟都是Google自家的東西。
  • 起步：編寫你的第一個 Flutter App
  • 入門：Flutter In Action
  • 狀態管理：ScopeModel、redux、Bloc、Provide。可以檢視Vadaski老哥的文章。
  • 實踐：重構現有專案的一個頁面，並嘗試整合到原生專案中。
  • 深入：檢視原始碼並知曉Flutter執行原理。

MVVM-Flutter

專案架構當然是MVVM，依舊遵循App開發架構指南。對比以前寫的MVVM-Android，發現有許多的共通之處，將依賴替換成Flutter版本之後就是熟悉的節奏。

專案地址：github.com/ditclear/mv…

MVVM

dependencies

思想：M-V-VM各層直接通過rx銜接，配合響應式的思想和rxdart的操作符進行邏輯處理，最後通過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; //資料倉儲
  String username = ""; //賬號
  String password = ""; //密碼
  bool _loading = false; // 載入中
  String _response = ""; //響應資料
  //...
  HomeViewModel(this._repo);

  /**
   * 呼叫model層的方法進行登入
   * doOnData : 請求成功時，處理響應資料
   * doOnError : 請求失敗時，處理錯誤
   * doOnListen ： 開始時loading為true,通知ui更新
   * doOnDone ： 結束時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);
    });
 
}
複製程式碼

最後效果：

screeshot

下載體驗

Android

寫在最後

Flutter上手還是蠻容易的，大概一週的時間就能熟悉，畢竟很多東西Flutter團隊都幫你弄好了。

而且hot reload真的舒服，一次編寫，兩端執行。當然缺點也是有的，比如：

  • 外掛質量較低（畢竟才起步，相信以後會完善）
  • json解析真的煩（遠不如kotlin簡單,而且沒有擴充套件）
  • 佈局層次較多（配上flutter dev tool ，在可接受範圍內）

總的來說，我願意在Flutter上投入時間，相信也能得到相應的回報，畢竟都9102年了，是吧?

如果你想了解更多關於MVVM、Flutter、響應式程式設計方面的知識，歡迎關注我。

你可以在以下地方找到我：

簡書：https://www.jianshu.com/u/117f1cf0c556

掘金：https://juejin.im/user/582d601d2e958a0069bbe687

Github: https://github.com/ditclear

MVVM架構在Flutter中的簡單實踐

相關文章