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

目录
相关文章
【YashanDB知识库】如何排查YMP报错:”OCI版本为空或OCI的架构和本地系统的架构不符“
【YashanDB知识库】如何排查YMP报错:”OCI版本为空或OCI的架构和本地系统的架构不符“
【YashanDB知识库】如何排查YMP报错:”OCI版本为空或OCI的架构和本地系统的架构不符“
|
2月前
|
存储 监控 算法
园区导航系统技术架构实现与原理解构
本文聚焦园区导航场景中室内外定位精度不足、车辆调度路径规划低效、数据孤岛难以支撑决策等技术痛点,从架构设计到技术原理,对该系统从定位到数据中台进行技术拆解。
101 0
园区导航系统技术架构实现与原理解构
|
3月前
|
存储 消息中间件 canal
zk基础—2.架构原理和使用场景
ZooKeeper(ZK)是一个分布式协调服务,广泛应用于分布式系统中。它提供了分布式锁、元数据管理、Master选举及分布式协调等功能,适用于如Kafka、HDFS、Canal等开源分布式系统。ZK集群采用主从架构,具有顺序一致性、高性能、高可用和高并发等特点。其核心机制包括ZAB协议(保证数据一致性)、Watcher监听回调机制(实现通知功能)、以及基于临时顺序节点的分布式锁实现。ZK适合小规模集群部署,主要用于读多写少的场景。
|
4月前
|
存储 人工智能 自然语言处理
为什么混合专家模型(MoE)如此高效:从架构原理到技术实现全解析
本文深入探讨了混合专家(MoE)架构在大型语言模型中的应用与技术原理。MoE通过稀疏激活机制,在保持模型高效性的同时实现参数规模的大幅扩展,已成为LLM发展的关键趋势。文章分析了MoE的核心组件,包括专家网络与路由机制,并对比了密集与稀疏MoE的特点。同时,详细介绍了Mixtral、Grok、DBRX和DeepSeek等代表性模型的技术特点及创新。MoE不仅解决了传统模型扩展成本高昂的问题,还展现出专业化与适应性强的优势,未来有望推动AI工具更广泛的应用。
1697 4
为什么混合专家模型(MoE)如此高效:从架构原理到技术实现全解析
|
6月前
|
资源调度 前端开发 算法
鸿蒙OS架构设计探秘:从分层设计到多端部署
本文深入探讨了鸿蒙OS的架构设计,从独特的“1+8+N”分层架构到模块化设计,再到智慧分发和多端部署能力。分层架构让系统更灵活,模块化设计通过Ability机制实现跨设备一致性,智慧分发优化资源调度,多端部署提升开发效率。作者结合实际代码示例,分享了开发中的实践经验,并指出生态建设是未来的关键挑战。作为国产操作系统的代表,鸿蒙的发展值得每一位开发者关注与支持。
|
2月前
|
达摩院 安全 Anolis
Anolis OS 23 架构支持家族新成员:Anolis OS 23.3 版本及 RISC-V 预览版发布
Anolis OS 23.3在保障基础功能持续演进、完善安全漏洞的修复的同时,实现了对 RISC-V 的初步支持。
|
4月前
|
机器学习/深度学习 算法 测试技术
图神经网络在信息检索重排序中的应用:原理、架构与Python代码解析
本文探讨了基于图的重排序方法在信息检索领域的应用与前景。传统两阶段检索架构中,初始检索速度快但结果可能含噪声,重排序阶段通过强大语言模型提升精度,但仍面临复杂需求挑战
134 0
图神经网络在信息检索重排序中的应用:原理、架构与Python代码解析
|
5月前
|
消息中间件 存储 设计模式
RocketMQ原理—5.高可用+高并发+高性能架构
本文主要从高可用架构、高并发架构、高性能架构三个方面来介绍RocketMQ的原理。
1468 21
RocketMQ原理—5.高可用+高并发+高性能架构
|
4月前
|
Java 开发者 Spring
Spring框架 - 深度揭秘Spring框架的基础架构与工作原理
所以,当你进入这个Spring的世界,看似一片混乱,但细看之下,你会发现这里有个牢固的结构支撑,一切皆有可能。不论你要建设的是一座宏大的城堡,还是个小巧的花园,只要你的工具箱里有Spring,你就能轻松搞定。
199 9