关于flutter:Flutter-Provider状态管理MVVM架构实战

418次阅读

共计 5604 个字符，预计需要花费 15 分钟才能阅读完成。

文章系列

Flutter Provider 状态治理 — 介绍、类图剖析、根本应用

Flutter Provider 状态治理 — 八种提供者应用剖析

Flutter Provider 状态治理 — 四种消费者应用剖析

Flutter Provider 状态治理 —MVVM 架构实战

视频系列

Flutter Provider 状态治理 — 介绍、类图剖析、根本应用

Flutter Provider 状态治理 — 八种提供者应用剖析

Flutter Provider 状态治理 — 四种消费者应用剖析

Flutter Provider 状态治理 —MVVM 架构实战

源码仓库地址

github 仓库地址

MVVM 介绍

MVVM 架构分为 M(Model)、V(View)、VM(ViewModel)三个局部，他们别离解决本人的分工，在 View 和Model之间应用 ViewModel 作为中介者，使 View 和Model不受业务逻辑影响。

Model: 模型层，解决 Api 数据、模型相干业务

View: 视图层，UI 出现、使用者互动等。

ViewModel: 视图模型，解决逻辑、将数据绑定给 View 展现。

MVVM 运行原理

当界面须要展现数据时，View跟 ViewModel 绑定，ViewModel向 Model 获得数据后，在 ViewModel 解决对应的业务逻辑，而后将数据处理，最初通过 View 更新并展现。

MVVM 长处

  • 易于变更需要，升高耦合
  • 权责分工明确
  • 不便测试

MVVM 毛病

  • 文件数量减少
  • bug 定位较为不易
  • 数据绑定耗费资源

MVVM 实战

上面这个我的项目实战是用 Provider 和MVVM搭建的架构，是一个笑话段子列表。

它蕴含了 5 次要类：

  • Service: 网络申请类
  • Model: 次要负责转换模型
  • View: 次要负责出现 UI，通过 ViewModel 获取数据并展现
  • Widgets: 独自的 UI 模块拆散
  • ViewModel: 解决业务逻辑，将数据绑定给 View 展现

定义模型

将网络申请回来的数据转换为对应的模型

import 'dart:convert';
 
JokeModel jokeModelFromJson(String str) => JokeModel.fromJson(json.decode(str));
 
String jokeModelToJson(JokeModel data) => json.encode(data.toJson());
 
class JokeModel {
  JokeModel({this.data,});
 
  final List<Joke>? data;
 
  factory JokeModel.fromJson(Map<String, dynamic> json) => JokeModel(data: List<Joke>.from(json["data"].map((x) => Joke.fromJson(x))),
  );
 
  Map<String, dynamic> toJson() => {"data": List<dynamic>.from(data!.map((x) => x.toJson())),
  };
}
 
class Joke {
  Joke({
    this.content,
    this.hashId,
    this.unixtime,
    this.updatetime,
  });
 
  final String? content;
  final String? hashId;
  final int? unixtime;
  final String? updatetime;
 
  factory Joke.fromJson(Map<String, dynamic> json) => Joke(content: json["content"],
    hashId: json["hashId"],
    unixtime: json["unixtime"],
    updatetime: json["updatetime"],
  );
 
  Map<String, dynamic> toJson() => {
    "content": content,
    "hashId": hashId,
    "unixtime": unixtime,
    "updatetime": updatetime,
  };
}

定义网络申请类

网络申请用到第三方网路申请库 Dio ^4.0.0，将申请回来的数据转换为模型，并更新ViewModel 数据。

import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter_provider_example/provider_mvvm_example/model/joke_model.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view_model/joke_view_model.dart';
 
class JokeService {static Future<void> getJokes(JokeViewModel jokeViewModel) async {var response = await Dio().get("http://v.juhe.cn/joke/content/text.php?page=1&pagesize=20&key=03303e4d34effe095cf6a4257474cda9");
    if (response.statusCode == 200) {
      // 转换模型
      JokeModel jokeModel = jokeModelFromJson(json.encode(response.data["result"]));
      // 更新数据
      jokeViewModel.setJokeList(jokeModel);
    }
  }
}

定义 ViewModel

这个 ViewModel 次要负责把申请回来的数据进行解决，并告诉 View 层更新数据

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/model/joke_model.dart';
 
class JokeViewModel with ChangeNotifier {List<Joke>? _jokeList = [];
 
  late Joke _joke;
 
  bool loading = true;
 
  setJokeList(JokeModel jokeModel) {_jokeList = [];
    _jokeList = jokeModel.data;
    loading = false;
    notifyListeners();}
 
  setJoke(Joke joke) {_joke = joke;}
 
  List<Joke>? get jokeList => _jokeList;
 
  Joke get joke => _joke;
}

定义 View

咱们在页面刚进入时进行初始化，而后通过 Provider 的Consumer来进行监听状态的变动。

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/service/joke_service.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view_model/joke_view_model.dart';
import 'package:flutter_provider_example/provider_mvvm_example/widgets/joke_item.dart';
import 'package:provider/provider.dart';
 
class JokeView extends StatefulWidget {
  @override
  _JokeViewState createState() => _JokeViewState();
}
 
class _JokeViewState extends State<JokeView> {
  @override
  void initState() {
 
    // 获取接口数据
    JokeService.getJokes(Provider.of<JokeViewModel>(context, listen: false));
 
    super.initState();}
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Provider + MVVM"),
      ),
      body: Consumer<JokeViewModel>(builder: (_, jokeViewModel, child) {
 
          JokeViewModel _jokeViewModel = jokeViewModel;
 
 
          if (jokeViewModel.loading) {
            return Center(child: CircularProgressIndicator(),
            );
          }
 
          return ListView.separated(itemBuilder: (_, index) {_jokeViewModel.setJoke(_jokeViewModel.jokeList![index]);
 
              return JokeItem(jokeViewModel: _jokeViewModel);
            },
            itemCount: _jokeViewModel.jokeList?.length ?? 0,
            separatorBuilder: (_, index) {
              return Divider(height: 1,);
            },
          );
 
        },
      ),
    );
  }
}

定义 Widgets

把须要独自抽离的 UI 放在 widgets 中，并把 ViewModel 传入进来。

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/model/joke_model.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view_model/joke_view_model.dart';
 
class JokeItem extends StatelessWidget {
 
  JokeItem({
    Key? key,
    this.jokeViewModel
  }) : super(key: key);
 
  final JokeViewModel? jokeViewModel;
 
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        left: 15,
        right: 15,
        top: 10,
        bottom: 10
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [Text("${jokeViewModel?.joke?.content ??""}",
            style: TextStyle(
              color: Colors.black87,
              letterSpacing: 1.3,
              wordSpacing: 2
            ),
          ),
          SizedBox(height: 5,),
          Text("${jokeViewModel?.joke?.updatetime ??"--"}")
        ],
      ),
    );
  }
}

援用 View

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view/joke_view.dart';
 
class ProviderMvvmExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {return JokeView();
  }
}

应用程序入口设置

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/provider_mvvm_example/provider_mvvm_example.dart';
import 'package:flutter_provider_example/provider_mvvm_example/view_model/joke_view_model.dart';
import 'package:provider/provider.dart';
 
void main() {runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(create: (_) => JokeViewModel(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: ProviderMvvmExample(),),
    );
  }
}

运行后果

总结

以上就是一个很简略的列表性能 MVVM 示例，在理论的状况下也不见得这是最好的形式，MVVM 还有很多变种写法，但外围是一样的。

最初说一句，架构只是辅助而已，世界没有最好的架构。与其探讨这些，还不如想想这些架构为什么会呈现？它的前因后果又是什么？在什么状况下要应用哪种架构？

正文完
flutter
发表至： flutter
2021-10-07
 0
把会的技能做个汇总NodeJs-后端-Flutter做安卓苹果App-H5端-微信小程序-web端管理后台
关于flutter:Flutter-第九课组件之Scaffold和AppBar和Drawer和FloatingActionButton
关于flutter:这一次解决Flutter-Dialog的各种痛点
关于flutter:源码篇Flutter-GetX深度剖析-我们终将走出自己的路万字图文