MVVM框架实现Flutter版WanAndroid客户端

本文主要是介绍MVVM框架实现Flutter版WanAndroid客户端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- - 简介
  - 效果图
  - - 玩安卓API
  - 主要架构MVVM
  - 网络框架Dio
  - 本地数据保存
  - 基本界面绘制
  - 总结：

简介

随着Google的推动，官方说了不会放弃java，但是kotlin的更新速度以及后面JetPack一系列开发组件的推出到现在强推的Compose，emmm…这个糟老头子坏的很。搞Android的都知道我们布局文件都写在xml里面，这还要去findid在编译的时候就等于多编译了一次，相比直接声明UI速度还是差了很多，所以官方强推了Compose；就这种直接注册UI的方法也有很多实现了的，比如ios，flutter，仔细观察flutter和compose你会发现，它们两个不说是同一个东西吧，只能说是一模一样，差别不会超过两层，既然这样为什么不直接学Flutter呢？所以这就有了自己尝试的这个flutter版本的wanandroid客户端。

效果图

界面不是很多，基本就实现了开发中常用的布局，数据列表啊，滑动啊之类的布局，其他的布局相信在原有的基础上进行延伸就能实现。
在这里插入图片描述

玩安卓API

玩安卓开放API

主要架构MVVM

这里有一小点需要提一下，dart文件命名方式是单词小写加下划线加单词小写的方式命名，既然是开发flutter就不能使用java的驼峰了，要习惯。。。。

1.base_model:创建一个model的基类，集成至ChangeNotifier，ChangeNotifier一个提供可扩展内容的组件，并发送消息通知

class BaseModel extends ChangeNotifier{bool disposed = false;void setState(ReqStatus status) {//发送消息，更新UI}
}

2.创建布局基类，也就是创建一个base的widget，后面的所有界面都可以从这个widget的基类进行延伸，这里要集成StatefulWidget可更新UI

class BasePage<T extends BaseModel> extends StatefulWidget {//构造方法BasePage({this.viewModel, this.child, this.builder, this.onFirstLoading});class _BasePageState<T extends BaseModel> extends State<BasePage<T>> {T viewModel;//@overridevoid initState() {super.initState();viewModel = widget.viewModel;if (widget.onFirstLoading != null) {widget.onFirstLoading(viewModel);}}}
}

3.编写model，对应实体类的数据信息，并实现fromJson和toJson方法

class BannerModel{String desc;int id;String imagePath;int isVisible;int order;String title;int type;String url;BannerModel({this.desc,this.id,this.imagePath,this.isVisible,this.order,this.title,this.type,this.url});BannerModel.fromJson(Map<String,dynamic> json){desc = json['desc'];id = json['id'];imagePath = json['imagePath'];isVisible = json['isVisible'];order = json['order'];title = json['title'];type = json['type'];url = json['url'];}Map<String, dynamic> toJson() {final Map<String, dynamic> data = new Map<String, dynamic>();data['desc'] = this.desc;data['id'] = this.id;data['imagePath'] = this.imagePath;data['isVisible'] = this.isVisible;data['order'] = this.order;data['title'] = this.title;data['type'] = this.type;data['url'] = this.url;return data;}
}

4.view_model:编写view_model继承至base_model，进行数据获取等操作，并将获取到的数据赋值给对应的model

class BannerViewModel extends BaseModel{List<BannerModel> bannerList = List();//数据集List<BannerModel> get getBannerList => bannerList;//get 数据集void getBannerData(){if(reqStatus == ReqStatus.success) return;Api.getBanner().then((value){if(['data'] == null) throw Exception('${value['errorMsg']}');value['data'].map((e){BannerModel bannerModel = BannerModel.fromJson(e);//解析数据bannerList.add(bannerModel);//添加到数据集}).toList();setState(ReqStatus.success);}).catchError((e) {setState(ReqStatus.error);});}
}

网络框架Dio

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等…

添加依赖(注意前面的空格)

dependencies:dio: ^4.0.0

创建单例模式

  Dio _dio;static DioManager _instance;BaseOptions _baseOptions;static DioManager getInstance(){if(null == _instance){_instance = new DioManager();}return _instance;}DioManager(){_baseOptions = new BaseOptions(baseUrl: Api.Base_Url,connectTimeout: 5000,receiveTimeout: 5000,);_dio = new Dio(_baseOptions)..interceptors.add(CookieManager(cookieJar));//添加cookieJar  拦截器也可以在这里添加}

发送get请求

response = await _dio.get(url, queryParameters: data, options: options);

发送post请求

response = await _dio.post(url, queryParameters: parameters,data: data, options: options);

返回的数据

///response.data  请求成功是一个map最终需要将map进行转换 , 请求失败直接返回null
///map:转换 ,将List中的每一个条目执行 map方法参数接收的这个方法,这个方法返回T类型，
///map方法最终会返回一个  Iterable<T>
return response.data;

本地数据保存

使用shared_preferences保存本地数据，比如登录后的用户信息，cookie等信息，都可以使用shared_preferences将数据保存到本地，方便需要用到的时候直接获取。

保存，key value形式

  static Future setData({@required type, @required key, @required value}) async {SharedPreferences sp = await SharedPreferences.getInstance();switch (type) {case String:sp.setString(key, value);break;case bool:sp.setBool(key, value);break;case double:sp.setDouble(key, value);break;case int:sp.setInt(key, value);break;case List:sp.setStringList(key, value);break;default:break;}}

读取

static Future get({@required type, @required key, defaultValue}) async {SharedPreferences sp = await SharedPreferences.getInstance();switch (type) {case String:return sp.getString(key) ?? defaultValue;break;case bool:return sp.getBool(key) ?? defaultValue;break;case double:return sp.getDouble(key) ?? defaultValue;break;case int:return sp.getInt(key) ?? defaultValue;break;case List:return sp.getStringList(key) ?? defaultValue;break;default:break;}}

移除

  static Future remove(key) async {SharedPreferences sp = await SharedPreferences.getInstance();if (!sp.containsKey(key)) return;sp.remove(key);}

基本界面绘制

在绘制一个界面的时候先要继承至StatefulWidget或者StatelessWidget；这就需要了解一下这两个widget的类型区别。

stateless是非动态的，它不依赖于除了传入数据以外的任何其他数据，这意味着改变其显示的唯一方式，就是改变传入其构造函数的参数。直接点就是不能通过setState去改变数据。

Stateful 是动态的，他们允许我们创建一个能动随时间改变内容的widget，并且不依赖于其初始化时被传入的静态状态，可以随着用户的输入，各种形式的异步回包或其他形式的状态变化而变化。可以通过setState去改变数据。

比如我们要创建一个登录界面，要实现edit输入，那么自然就要继承至StatefulWidget

class LoginPage extends StatefulWidget {@override_LoginPageState createState() => _LoginPageState();
}

然后再state里面声明对应的model，以便在需要使用到的时候使用

class _LoginPageState extends State<LoginPage> {//声明LoginViewModel viewModel = LoginViewModel();//使用viewModel.passWordController

因为没有XML显示，直接使用代码写布局，就会显得嵌套层级很多，所以一些布局我们可以将其提出来，封装成公用的进行调用，比如一个包含有作者和标题的item，垂直排列。

编写标题

    Text title = new Text(widget.title,style: new TextStyle(fontSize: 16.0, color: Colors.black),textAlign: TextAlign.left,);

编写作者

new Expanded(child: Text.rich(TextSpan(children: [TextSpan(text: "作者:"),TextSpan(text: widget.author,style: new TextStyle(color: Colors.white))]))
),

然后使用Column包裹起来

Column column = new Column(crossAxisAlignment: CrossAxisAlignment.start,//子控件左对齐children: <Widget>[new Padding(//margin: 10  外边距上下左右都是10padding: EdgeInsets.all(10.0),child: author,),new Padding(//从左侧、顶部、右侧和底部的偏移创建插入。 可以理解为margin let  top  right bottompadding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 10.0),child: title,),new Padding(padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 10.0),child: rowCollection,),],
);