Flutter mvvm简单实战

卢宜然

2023-12-01

内容指导

本章不是一个初学者的话题，如果您连基础的接口调用，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错误信息
            ),
          ],
        ),
      ),
    );
  }
}

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WSzg63i0-1616134507378)(https://blog.td0f7.cn/upload/2021/03/yvipd-x7n77-156914883240438cbfd99521f8b8c3fb.gif)]

总结

这样是不是代码非常整洁？
ui有问题就在view层改，并且view层只有ui代码
业务有问题就在viewmodel层改
这样极大增加了项目维护的便捷性

如果本人有什么地方理解错误，还望大家评论或私聊告诉我，一起学习进步