写在前面
在 Flutter 中实现 MVVM（Model-View-ViewModel）架构是为了将 UI（视图）与业务逻辑（模型和视图模型）分离，提高代码的可维护性和可读性。
整体架构概述
Model: 数据层，处理应用程序的业务逻辑和数据管理。View: 用户界面层，负责展示数据并接受用户输入。ViewModel: 连接模型和视图的中间层，处理与视图相关的业务逻辑，并通知视图更新。
各文件详细讲解
main.dart
import 'package:flutter/material.dart';import 'package:mvvm/View/MyHomePage.dart';import 'package:provider/provider.dart';import 'Model/Model.dart';import 'ViewModel/CounterViewModel.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter MVVM Example', home: ChangeNotifierProvider( create: (context) => CounterViewModel(CounterModel()), child: MyHomePage(), ), ); }}
复制代码
导入依赖: 导入 Flutter 的 Material 库、MVVM 架构的视图、提供者库、模型和视图模型。main 函数: 应用程序的入口，使用 runApp 启动 MyApp。MyApp 类:MaterialApp 用于创建一个 Material 风格的应用。使用 ChangeNotifierProvider 来创建 CounterViewModel 实例并将其提供给 MyHomePage。这样，MyHomePage 及其子组件就能访问 CounterViewModel。
CounterViewModel.dart
import 'package:flutter/foundation.dart';import '../Model/Model.dart';
class CounterViewModel extends ChangeNotifier { final CounterModel _counterModel;
CounterViewModel(this._counterModel);
int get counter => _counterModel.counter;
void incrementCounter() { _counterModel.increment(); notifyListeners(); }}
复制代码
导入依赖: 导入 flutter/foundation.dart 和模型。CounterViewModel 类:继承自 ChangeNotifier，实现了观察者模式，使得 UI 组件能够监听到数据的变化。_counterModel 是 CounterModel 的实例，负责持有计数数据。counter: 一个 getter，提供当前计数值。incrementCounter: 增加计数值的方法，并调用 notifyListeners()来通知 UI 进行更新。
MyHomePage.dart
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:provider/provider.dart';import '../ViewModel/CounterViewModel.dart';class MyHomePage extends StatefulWidget { MyHomePage({super.key});
@override State<MyHomePage> createState() => MyHomePage_State();}class MyHomePage_State extends State<MyHomePage> { @override Widget build(BuildContext context) { final counterViewModel = Provider.of<CounterViewModel>(context); return Scaffold( appBar: AppBar( title: Text('Flutter MVVM Example'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('flutter鸿蒙版本MvvM原理的说明：Dart'), Text('页面MyHomePage向中间层CounterViewModel要数据'),//业务层（负责直接面对用户的一层） Text('中间层CounterViewModel向数据处理层Model要数据：中间创建一个方法并使用该方法调用数据处理层的方法'), Text('中间层方法调用完数据处理层方法后使用notifyListeners来通知页面更新UI'), Text( '${counterViewModel.counter}', style: Theme.of(context).textTheme.headlineMedium, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: counterViewModel.incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); }}
复制代码
导入依赖: 导入 Flutter 库和 Provider**MyHomePage 类:作为应用的主要视图，展示了计数器的当前值。build 方法:使用 Provider.of(context)获取 CounterViewModel 的实例。创建一个 Scaffold，显示应用的结构。显示一些文本以说明 MVVM 的工作原理，并动态展示计数值。使用 FloatingActionButton 调用 incrementCounter 方法以增加计数值。
Model.dart
class CounterModel { int _counter = 0;
int get counter => _counter;
void increment() { _counter++; }}
复制代码
CounterModel 类:作为数据模型，负责持有和管理计数数据。_counter 是一个私有变量，用于存储计数值。counter: 一个 getter，提供对计数值的访问。increment: 方法用于增加计数值。
MVVM 架构思想分析
分离关注点
Model（模型）:负责数据的管理和业务逻辑，独立于 UI 层。所有数据操作都在这里完成，如获取、更新等。
View（视图）:负责展示数据并处理用户输入。UI 组件只关心如何展示数据，而不涉及数据如何被处理。ViewModel（视图模型）:作为中介，负责协调模型和视图之间的交互。处理从视图接收的用户输入，并调用模型进行相应的数据处理。一旦模型的数据发生变化，ViewModel 会通过 notifyListeners()通知视图更新 UI。
数据绑定
在这个示例中，Flutter 的 Provider 包使得数据绑定变得简单。通过 ChangeNotifier 和 Provider，视图可以非常方便地监听数据变化。当用户点击浮动按钮增加计数时，视图模型调用模型的方法来更新数据，并通知视图重新构建。这种响应式的设计使得开发变得更加高效。
可维护性和可测试性
MVVM 架构使得代码结构更加清晰，增强了可维护性。各个层次的分离使得测试变得更加简单，例如可以单独测试模型和视图模型而无需依赖 UI。写在最后
在 Flutter 中实现 MVVM 架构的关键在于利用 Provider 进行状态管理，将数据和 UI 分开，使得应用程序的各个部分相互独立，增强了可维护性和可测试性。通过使用 CounterViewModel 作为中介，视图可以轻松地与模型交互，并在数据变化时自动更新。整个架构的设计不仅提升了代码的整洁度，也使得开发者能够更专注于各自的职责
评论