文章系列
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还有很多变种写法，但外围是一样的。
最初说一句，架构只是辅助而已，世界没有最好的架构。与其探讨这些，还不如想想这些架构为什么会呈现？它的前因后果又是什么？在什么状况下要应用哪种架构？