flutter鸿蒙版本mvvm架构思想原理

简介: 在Flutter中实现MVVM架构,旨在将UI与业务逻辑分离,提升代码可维护性和可读性。本文介绍了MVVM的整体架构,包括Model、View和ViewModel的职责,以及各文件的详细实现。通过`main.dart`、`CounterViewModel.dart`、`MyHomePage.dart`和`Model.dart`的具体代码,展示了如何使用Provider进行状态管理,实现数据绑定和响应式设计。MVVM架构的分离关注点、数据绑定和可维护性特点,使得开发更加高效和整洁。

写在前面
在Flutter中实现MVVM(Model-View-ViewModel)架构是为了将UI(视图)与业务逻辑(模型和视图模型)分离,提高代码的可维护性和可读性。

  1. 整体架构概述
    Model: 数据层,处理应用程序的业务逻辑和数据管理。
    View: 用户界面层,负责展示数据并接受用户输入。
    ViewModel: 连接模型和视图的中间层,处理与视图相关的业务逻辑,并通知视图更新。
  2. 各文件详细讲解
    2.1. 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。
2.2. 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进行更新。
2.3. 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 createState() => MyHomePage_State();
}
class MyHomePage_State extends State {
@override
Widget build(BuildContext context) {
final counterViewModel = Provider.of(context);
return Scaffold(
appBar: AppBar(
title: Text('Flutter MVVM Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
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方法以增加计数值。
2.4. Model.dart
class CounterModel {
int _counter = 0;

int get counter => _counter;

void increment() {
_counter++;
}
}
CounterModel类:
作为数据模型,负责持有和管理计数数据。
_counter是一个私有变量,用于存储计数值。
counter: 一个getter,提供对计数值的访问。
increment: 方法用于增加计数值。

  1. MVVM架构思想分析
    3.1. 分离关注点
    Model(模型):

负责数据的管理和业务逻辑,独立于UI层。所有数据操作都在这里完成,如获取、更新等。
View(视图):

负责展示数据并处理用户输入。UI组件只关心如何展示数据,而不涉及数据如何被处理。
ViewModel(视图模型):

作为中介,负责协调模型和视图之间的交互。
处理从视图接收的用户输入,并调用模型进行相应的数据处理。
一旦模型的数据发生变化,ViewModel会通过notifyListeners()通知视图更新UI。
3.2. 数据绑定
在这个示例中,Flutter的Provider包使得数据绑定变得简单。通过ChangeNotifier和Provider,视图可以非常方便地监听数据变化。
当用户点击浮动按钮增加计数时,视图模型调用模型的方法来更新数据,并通知视图重新构建。这种响应式的设计使得开发变得更加高效。
3.3. 可维护性和可测试性
MVVM架构使得代码结构更加清晰,增强了可维护性。
各个层次的分离使得测试变得更加简单,例如可以单独测试模型和视图模型而无需依赖UI。
写在最后
在Flutter中实现MVVM架构的关键在于利用Provider进行状态管理,将数据和UI分开,使得应用程序的各个部分相互独立,增强了可维护性和可测试性。通过使用CounterViewModel作为中介,视图可以轻松地与模型交互,并在数据变化时自动更新。整个架构的设计不仅提升了代码的整洁度,也使得开发者能够更专注于各自的职责。
————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/lbcyllqj/article/details/142734009

目录
相关文章
|
1月前
|
存储 数据管理 开发者
Flutter&鸿蒙next 中的 setState 使用场景与最佳实践
在 Flutter 中,`setState` 是最常用的状态管理方法之一,用于更新局部状态并触发 UI 重新构建。本文介绍了 `setState` 的基本用法、代码示例、适用场景及最佳实践,帮助开发者高效地管理状态,确保代码的可维护性和性能。
86 1
|
1月前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
58 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
1月前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
46 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
1月前
|
存储 Shell 开发工具
Flutter&鸿蒙next 中使用 MobX 进行状态管理
本文介绍了如何在 Flutter 中使用 MobX 进行状态管理。MobX 是一个基于观察者模式的响应式编程库,通过 `@observable` 和 `@action` 注解管理状态,并使用 `Observer` 小部件自动更新 UI。文章详细讲解了 MobX 的核心概念、如何集成到 Flutter 项目中以及具体的代码示例。适合希望在 Flutter 应用中实现高效状态管理的开发者阅读。
95 9
|
1月前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
111 5
|
1月前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
97 2
|
1月前
|
容器
Flutter &&鸿蒙next中的 Stack 和 Positioned 用法详解
在 Flutter 中,Stack 和 Positioned 是创建层叠布局和灵活定位元素的常用组件。Stack 可以将多个子组件叠加在一起,允许子组件相互重叠;Positioned 用于在 Stack 内部精确控制子组件的位置。本文详细介绍了它们的基本用法、属性和应用场景,包括动画、弹出层和悬浮按钮等。
83 1
|
1月前
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
100 1
|
1月前
|
UED 开发者 容器
Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
在 Flutter 开发中,Expanded 和 Flexible 是两个常用的布局控件,用于管理 UI 布局的空间分配。Expanded 使子组件占据主轴上的所有剩余空间,而 Flexible 允许通过 flex 参数按比例分配空间。掌握两者的区别和使用场景,可以让你在构建复杂 UI 时更加得心应手。
86 1
|
1月前
|
UED
Flutter&鸿蒙next 中的 Drawer 导航栏
在 Flutter 中,Drawer 是一个常用的侧边栏导航组件,通过点击菜单按钮或滑动屏幕显示。它用于展示导航项、用户信息和应用设置等。本文通过一个简单的示例代码,介绍了如何使用 Drawer 实现多页面导航,包括 Drawer 的基本结构、ListView 和 ListTile 的使用,以及页面内容的切换。希望对理解和使用 Flutter 的 Drawer 组件有所帮助。
88 1