MVVM框架实现Flutter版WanAndroid客户端

2024-03-29 15:18
文章标签 实现 框架 客户端 flutter mvvm 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,),],
);

就可以得到以下一个布局
在这里插入图片描述

总结：

学习之后基本也能实现Flutter开发一个app，实现常用布局，这也方便后面直接去看jetpack compose的时候更好的上手。

提供一下源码下载地址吧，上面截取的都只是代码片段，详情可以访问Demo下载地址进行了解。

GitHub Demo下载地址

这篇关于MVVM框架实现Flutter版WanAndroid客户端的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/858932。

相关文章

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈？ cross-plateform 跨平台应用程序-03-如果只选择一个框架，应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2