HarmonyOS 框架搭建

现在所有的变量声明以及逻辑实现都在UI页面上实现，如下：

@Entry
@Component
struct SetPasswordPage {
  @State inputAccount: string = "";
  @State inputPassword: string = "";
  @State inputCode: string = "";
  @State enableAgree: boolean = false;
  @State enableLogin: boolean = false;

如果将所有逻辑以及状态定义都放在同一个压面，那会导致页面代码太多不利于维护，我想对UI和逻辑之间进行解耦。

希望实现一个类似MVVM框架，将状态数据以及逻辑实现放到ViewModel去中实现，这样的话UI就只实现绘制部分，至于UI和数据之间的关联通过ViewModel之间的状态提升去通知重绘，

我尝试过自己搭建但是总有一点差强人意，是否有官网框架或者其他代码库有实现这个需求？

HarmonyOS

fox280

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

aquaa

Model 数据源，可以是任何获取数据的api，方法。可以是从网络、缓存、数据库任意渠道获取。

View UI显示

ViewModel 定义交互接口，获取和处理数据

依赖关系：

View 与页面数据绑定，持有ViewModel，页面交互调用ViewModel的接口触发

ViewModel 依赖 Model获取数据，更新UI数据

View和Model之间无依赖

HarmonyOS 应用中使用MVVM：

组件中的build函数，对应View层，提供页面布局，以及和UI数据的绑定关系

viewModel,根据UI上的交互入口定义接口，布局中的交互入口调用ViewModel的对应接口，触发业务逻辑

api接口对应Model，提供了原始数据，ViewModel通过处理这些数据来获取到UI数据

View层 (@Components修饰组件渲染的UI):

import Data from './Model';
import { ViewModel } from './ViewModel';

@Entry
@Component
struct Index {
  private viewModel: ViewModel = new ViewModel();
  @State data: Data = this.viewModel.data;

  build() {
    Column() {
      Text(this.data.name)
        .fontColor(Color.Orange)
        .fontSize(30)
        .fontWeight(500)
        .align(Alignment.Center)
        .padding({ bottom: 20 })

      Button(`加薪`)
        .width(140)
        .height(50)
        .alignSelf(ItemAlign.Start)
        .backgroundColor(Color.Green)
        .onClick(() => {
          this.viewModel.addWages();
        })
    }
    .width("100%")
    .height("100%")
  }
}

Model层：存储数据和相关逻辑的模型

@Observed
export default class Data {
  public name: string;
  public wages: number;

  constructor(name: string, wages: number) {
    this.name = name;
    this.wages = wages;
  }
}

ViewModel层：在ArkUI中，ViewModel是存储在自定义组件的状态变量、LocalStorage和AppStorage中的数据。

import Data from './Model';

export class ViewModel {
  public data: Data;

  constructor() {
    this.data = new Data("小明", 2000);
  }

  public addWages() {
    this.data.wages++;
  }

  public changeName() {
    this.data.name = "阿红";
  }
}

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 框架搭建

订阅鸿蒙技术特刊，精选内容抢先看