鸿蒙UI架构

ArkUI采用了 Model-View-ViewModel(MVVM)架构模式。MVVM 将应用分为Model、View和ViewModel三个核心部分,实现数据、视图与逻辑的分离。通过这种模式,UI可以自动更新状态变化,从而更高效地管理数据和视图的绑定与更新。

  • View:用户界面层。负责用户界面展示并与用户交互,不包含任何业务逻辑。它通过绑定ViewModel层提供的数据实现动态更新。
  • Model:数据访问层。以数据为中心,不直接与用户界面交互。负责数据结构定义,数据管理(获取、存储、更新等),以及业务逻辑处理。
  • ViewModel:表示逻辑层。作为连接Model和View的桥梁,通常一个View对应一个ViewModel。View和ViewModel有两种通信方式:

1.方法调用:View通过事件监听用户行为,在回调里面触发ViewModel层的方法。例如当View监听到用户Button点击行为,调用ViewModel对应的方法,处理用户操作。

2.双向绑定:View绑定ViewModel的数据,实现双向同步。

ArkUI开发模式图

ArkUI的UI开发模式即是MVVM模式,而状态变量在MVVM模式中扮演着ViewModel的角色,向上刷新UI,向下更新数据,整体框架如下图:

分层说明

View层

View层通常可以分为下列组件:

  • 页面组件:所有应用基本都是按照页面进行分类的,比如登录页,列表页,编辑页,帮助页,版权页等。每个页面对应需要的数据可能是完全不一样的,也可能多个页面需要的数据是同一套。
  • 业务组件:本身具备本APP部分业务能力的功能组件,典型的就是这个业务组件可能关联了本项目的ViewModel中的数据,不可以被共享给其他项目使用。
  • 通用组件:像系统组件一样,这类组件不会关联本APP中ViewModel的数据,这些组件可实现跨越多个项目进行共享,来完成比较通用的功能。

Model层

Model层是应用的原始数据提供者,代表应用的核心业务逻辑和数据。

ViewModel层

为View层的组件提供对应数据,按照页面组织,当用户浏览页面时,某些页面可能不会被显示,因此,页面数据最好设计成懒加载(按需加载)的模式。

ViewModel层数据和Model层数据的区别:

Model层数据是按照整个工程、项目来组织数据,构成一套完整的APP业务数据体系。

ViewModel层数据,是提供某个页面上使用的数据,它可能是整个APP的业务数据的一部分。另外ViewModel层还可以附加对应Page的辅助页面显示数据,这部分数据可能与本APP的业务完全无关,仅仅是为页面展示提供便利的辅助数据。

架构核心原则

不可跨层访问

  • View层不可以直接调用Model层的数据,只能通过ViewModel提供的方法进行调用。
  • Model层不能直接操作UI,只能通知ViewModel层数据有更新,由ViewModel层更新对应的数据。

下层不可访问上层数据

下层数据通过通知模式更新上层数据。在业务逻辑中,下层不可直接获取上层数据。例如,ViewModel层的逻辑处理不应该依赖View层界面上的某个值。

非父子组件间不可直接访问

这是针对View层设计的核心原则,一个组件应该具备以下逻辑:

  • 禁止直接访问父组件(必须使用事件或是订阅能力)。
  • 禁止直接访问兄弟组件。这是因为组件应该仅能访问自己的子节点(通过传参)和父节点(通过事件或通知),以此完成组件之间的解耦。

对于一个组件,这样设计的原因如下:

  • 组件自己使用了哪些子组件是明确的,因此可以访问。
  • 组件被放置于哪个父节点下是未知的,因此组件想访问父节点,就只能通过通知或者事件能力完成。
  • 组件不可能知道自己的兄弟节点是谁,因此组件不可以操纵兄弟节点。

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-mvvm

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐