Flutter mvvm简单实战

时间:2021-7-21 作者:qvyue

内容指导

本章不是一个初学者的话题,如果您连基础的接口调用,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 navigatorKey = new GlobalKey();

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 {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("登陆"),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          children: [
            TextField(
              controller: Provider.of(context).user,//获取viewmodel管理的controller状态
              decoration: InputDecoration(
                labelText: "账号",
                prefixIcon: Icon(Icons.person),
              ),
            ),
            SizedBox(height: 16),
            TextField(
              controller: Provider.of(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().login,//调用viewmodel层的登陆方法
                color: Colors.blue,
                child: Text(
                  "登陆",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: 16),
            Expanded(
              child:
                  Text(Provider.of(context).result.toString()),////获取viewmodel管理的result错误信息
            ),
          ],
        ),
      ),
    );
  }
}

效果展示

Flutter mvvm简单实战
yvipdx7n77.gif

总结

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。