内容指导
本章不是一个初学者的话题，如果您连基础的接口调用，ui界面都不会，推荐先去学习flutter基础再来看这篇博客
架构简介
- view层 显示view
- model层 请求处理http操作
- viewmodel保存状态，处理业务逻辑，充当view跟model通信的桥梁
- util存储工具类，比如dio封装
项目简介
没有封装dio等
只是实现了mvvm登陆功能，也许有的地方不正确，希望各位大佬指出
如果对您有所帮助，麻烦动动小手点个赞
项目创建
flutter create mvvm_demo
项目分析
1.由于我们viewmodel负责管理数据，以及负责view跟model层通信，所以这里我们用proivder状态管理
引入provider
provider: ^4.3.2+3
2.项目api请求调用，我这里选择dio，所以还需要引入dio
dio: 3.0.10
由于要实现登陆功能，所以我在老项目上找了一个登陆接口，这里不放出这个接口，大家自己解决接口问题
首先确认api需要的参数
- userName
- passWord
我的api只需要两个参数
3.由于我们viewmodel来处理业务逻辑，所以我们viewmodel跳转界面或弹框的时候，怎么获取到当前的context？
我们采用全局navigatorKey
修改main.dart
final GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
navigatorKey: navigatorKey,有了这个，在其他类就可以调用navigatorKey来获取context了
//省略
搭建项目结构
api以及引入全部完成后，我们要搭建项目结构，创建以下几个包
- model
- viewmodel
- view
- util
前面三个不用介绍，第四个util做dio封装方法，我们这里只简单封装一下
创建DioUtil
在util下创建 dio_util.dart 文件
import 'package:dio/dio.dart';
//代码很简单，需要传一个接口地址，以及参数
dynamic post(String url, Map map) async {
Response response = await Dio().post(url, data: map);
return response.data;
}
实际项目会对dio封装，由于是demo不做演示
创建model
在 model下创建 login_model.dart 文件
model只有http请求代码
import 'package:mvvm_demo/util/dio_util.dart';
class LoginModel {
//提供api请求方法，并把接口返回信息当作返回值
dynamic login(Map map) async {
return await post(
"http://106.38.32.194:86/OrderTrackerService.asmx/Login", map);
}
}
创建viewmodel
在 viewmodel下创建 login_viewmodel.dart 文件
viewmodel只保存状态，以及处理业务逻辑，里边没有widget更没有http请求代码
首先我们的后台需要账号密码两个参数，那么我们界面肯定有两个输入框，我们这里输入框的值用controller来接收
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mvvm_demo/main.dart';
import 'package:mvvm_demo/model/login_model.dart';
import 'package:mvvm_demo/view/menu.dart';
class LoginViewmodel extends ChangeNotifier {
//model对象，用于调用api请求方法
LoginModel _model = LoginModel();
//账号输入框controller
TextEditingController _user = TextEditingController();
//密码输入框controller
TextEditingController _pass = TextEditingController();
dynamic _result = ""; //登陆返回的错误信息，如果正确登陆，则为空
下边get set方法不做介绍
TextEditingController get user {
return _user;
}
TextEditingController get pass {
return _pass;
}
void setResult(dynamic data) {
_result = data;
notifyListeners();//如果有错误信息，则刷新所有观察者
//比如一个text用了这个值，则视为观察者
//必须正确使用provider状态管理，才可以监听到值，下一步骤会告诉大家怎么配置provider
}
dynamic get result {
return _result;
}
void login() async {//给view层提供登陆方法
dynamic result = await _model.login({//调用model层的api请求方法，并把参数当作map传给model，提供给dio请求
"userName": _user.text,
"passWord": _pass.text,
});
print(result.toString());//返回值
if (result.toString().substring(0, 5) == "false") {
//如果登陆失败，则在界面提示错误信息
//我的如果登陆失败返回格式为 **false错误信息**
//所以我的错误信息要从第六位截取
setResult(result.toString().substring(5));
} else {
setResult(""); //登陆成功，清空错误提示信息
//下边代码可以获取到我们刚才设置的全局navigatorKey的context，来实现界面跳转
Navigator.of(navigatorKey.currentContext).push(
CupertinoPageRoute(
builder: (context) {
return Menu();
},
),
); //跳转界面
}
}
}
配置provider状态管理
修改 main.dart
将
void main() {
runApp(MyApp());
}
修改为
void main() {
runApp(MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => LoginViewmodel()),
//多个界面请在下方添加多个viewmodel
],
child: MyApp(),
));
}
创建view
在 view下创建 login.dart 文件
import 'package:flutter/material.dart';
import 'package:mvvm_demo/viewmodel/login_viewmodel.dart';
import 'package:provider/provider.dart';
class Login extends StatefulWidget {
@override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("登陆"),
),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
TextField(
controller: Provider.of<LoginViewmodel>(context).user,//获取viewmodel管理的controller状态
decoration: InputDecoration(
labelText: "账号",
prefixIcon: Icon(Icons.person),
),
),
SizedBox(height: 16),
TextField(
controller: Provider.of<LoginViewmodel>(context).pass,//获取viewmodel管理的controller状态
decoration: InputDecoration(
labelText: "密码",
prefixIcon: Icon(Icons.lock),
),
obscureText: true,
),
SizedBox(height: 16),
Container(
width: double.infinity,
child: RaisedButton(
onPressed: context.read<LoginViewmodel>().login,//调用viewmodel层的登陆方法
color: Colors.blue,
child: Text(
"登陆",
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(height: 16),
Expanded(
child:
Text(Provider.of<LoginViewmodel>(context).result.toString()),////获取viewmodel管理的result错误信息
),
],
),
),
);
}
}
效果展示
yvipdx7n77.gif
总结
这样是不是代码非常整洁？
ui有问题就在view层改，并且view层只有ui代码
业务有问题就在viewmodel层改
这样极大增加了项目维护的便捷性
如果本人有什么地方理解错误，还望大家评论或私聊告诉我，一起学习进步
