简介
随着Google的推动，官方说了不会放弃java，但是kotlin的更新速度以及后面JetPack一系列开发组件的推出到现在强推的Compose，emmm…这个糟老头子坏的很。搞Android的都知道我们布局文件都写在xml里面，这还要去findid在编译的时候就等于多编译了一次，相比直接声明UI速度还是差了很多，所以官方强推了Compose；就这种直接注册UI的方法也有很多实现了的，比如ios，flutter，仔细观察flutter和compose你会发现，它们两个不说是同一个东西吧，只能说是一模一样，差别不会超过两层，既然这样为什么不直接学Flutter呢？所以这就有了自己尝试的这个flutter版本的wanandroid客户端。
效果图
界面不是很多，基本就实现了开发中常用的布局，数据列表啊，滑动啊之类的布局，其他的布局相信在原有的基础上进行延伸就能实现。
玩安卓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;
//
@override
void 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 外边距上下左右都是10
padding: EdgeInsets.all(10.0),
child: author,),
new Padding(
//从左侧、顶部、右侧和底部的偏移创建插入。 可以理解为margin let top right bottom
padding: 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,),
],
);
就可以得到以下一个布局
总结：
学习之后基本也能实现Flutter开发一个app，实现常用布局，这也方便后面直接去看jetpack compose的时候更好的上手。
提供一下源码下载地址吧，上面截取的都只是代码片段，详情可以访问Demo下载地址进行了解。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
