MVVM架构在Flutter中的简单实践

最新推荐文章于 2024-08-20 00:54:19 发布

peihp_

最新推荐文章于 2024-08-20 00:54:19 发布

阅读量1.8k

点赞数

分类专栏：安卓 Flutter android小咖秀文章标签： MVVM架构 Flutter实践

安卓同时被 3 个专栏收录

58 篇文章 0 订阅

订阅专栏

android小咖秀

34 篇文章 1 订阅

订阅专栏

Flutter

1 篇文章 0 订阅

订阅专栏

写在前面

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版本之后就是熟悉的节奏。

项目地址：https://github.com/ditclear/mvvm_flutter

dependencies

dio : 网络请求
rxdart：响应式编程
flutter-provide：通知ui更新数据

思想：M-V-VM各层直接通过rx衔接，配合响应式的思想和rxdart的操作符进行逻辑处理，最后通过provide来更新视图。

//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);
  });

}