鸿蒙开发-HarmonyOS UI架构

初步布局Index

当我们新建一个工程之后,首先会进入Index页。我们先简单的做一个文章列表的显示

class Article {title?: stringdesc?: stringlink?: string
}@Entry
@Component
struct Index {@State articles: Article[] = []build() {Row() {Scroll() {Column() {ForEach(this.articles, (item: Article) => {Column() {Text(item.title).fontWeight(FontWeight.Bold)Text(item.desc)Text("----------")}}, (item: Article) => {return item.link})}.width('100%')}}.height('100%')}
}

这样,我们只要把articles里面填充数据,就能正常显示一个列表了。

数据从哪来

可以看到上面的代码里是没有数据的,只有一个空数组。我们想要从网络获取数据。那么,数据怎么来呢?最简单粗暴的写法就是在aboutToAppear()中异步发送get请求,然后更新articles数组。

登录后复制

aboutToAppear() {// 请求网络数据axios.get(url).then(response => {  // 更新this.articles}
}

好,现在Index界面依赖了网络库,甚至会依赖三方的axios库。在我之前一个项目中,还依赖过端云的agconnect库。于是Previewer直接报错,说因为有agconnect的依赖,Previewer编译失败。

我们可以看到Index和数据获取的逻辑强耦合在了一起。没有专注于他自身的UI布局的功能。

数据请求扔给另一个类IndexViewModel

那一堆网络请求和处理response的代码,看了就头疼。于是我们初步的设想就是把他完全丢给另一个类去处理,IndexViewModel

@Observed // 这个不能漏,当类成员变化时可以被UI监听到
export default class IndexViewModel {articles?: Array<Article>refreshData() {// 请求网络数据// 更新this.articles}
}

那么Index里变成了

  @State viewModel: IndexViewModel = new IndexViewModel() aboutToAppear() {this.viewModel.refreshData()}

现在Index只依赖一个IndexViewModel了。将来无论扩展到多少数据,统一从IndexViewModel里面读取。refreshData()里面也可以填任意多个其他的请求数据源。

可以预览了吗

我们知道,如果只布局一个固定界面,连数据都不需要,那是最简单的,预览也是没问题的。当涉及到数据的依赖,那问题就开始复杂了。Previewer的数据从哪里获得?我们知道即使现在我们把所有网络请求和数据成员都放到了IndexViewModel里面,但这也只是让Index界面没那么多代码,仅此而已。Index界面和IndexViewModel的依赖还是实实在在存在的。也就是说,Index界面还是依赖着真实的数据源,这将使未来Previewer的工作带来更多不确定性。
聪明的你一定想到了,可以写一个IndexViewModelMock类,和IndexViewModel结构一模一样,只是refreshData()里给articles赋值一个假数据。所以我们此时为了代码有条理,提取一个接口,叫IndexViewModelInterface
这样,Index里面的成员就变成了这样

// 真机运行时
@State viewModel: IndexViewModelInterface = new IndexViewModel()
// 使用Previewer时
@State viewModel: IndexViewModelInterface = new IndexViewModelMock()

现在我们又进了一步,可以用假数据预览了。但是还有手动切换数据源的操作。
哦对了,这个解决方案看似很理想,但似乎Arkts对这种结构并不支持。当@State viewModel: IndexViewModelInterface这样声明的成员,调用接口里的方法,会在运行时报错,说无法调用方法。

Previewer和Run的数据源隔离

现在我们做了很多重构,比最初的意大利面有条理很多。但手动切换终究还是不优雅,主要还是麻烦。我们能不能,只让UI布局做UI布局的事情,彻底把数据请求解耦。
声明一个struct IndexContentIndex的布局变成这样

  build() {Column() {IndexContent({ viewModel: this.viewModel })}}

显然Index的成员这样声明

viewModel: IndexViewModel = new IndexViewModel()

把之前所有的Index下的布局,放到IndexContent中,然后IndexContent的成员这样声明

@Prop viewModel: IndexViewModel

这样,Index里面包了一个IndexContent,数据的请求由Index控制,IndexContent完全被动接受数据,并进行UI布局。
运行一下,确认App可以正常运行。

那么,我们现在能预览Index了吗?不,我们只需要预览IndexPreviewer就行了。布局的本体现在在IndexPreviewer里的IndexContent里面。
新建一个struct IndexPreviewer,同样,布局里面只包含一个IndexContent

@Preview
@Component
struct IndexPreviewer {viewModel: IndexViewModel = new IndexViewModel()async aboutToAppear() {// 刷新数据}build() {IndexContent({ viewModel: this.viewModel })}
}

稍后将重构,给IndexPreviewer里面提供假数据。
这样,由于main_pages.json中定义的页面路径是"pages/Index",所以运行时会显示Index页面中的内容。预览时,不要去预览Index,只需要预览IndexPreviewer,就能快速调整布局。

分离请求和view model

还记得上文提到的ViewModelInterface不管用吗?refreshData()在接口里,运行时调用会报错。于是,我们再把articlesrefreshData()分开,refreshData()放到一个新建的类IndexModel中。
这样,IndexPreviewerIndex里面依赖的成员都是viewModel: IndexViewModel = new IndexViewModel(),而IndexModel可以继承自一个抽象类(之后会解释为什么不是接口)IndexModelBase,再创建一个IndexModelMock继承自IndexModelBase
View model中只保留状态成员的做法,参考了官方文档的 MVVM模式
至此,架构越来越明了了。
Index的完整代码如下

@Entry
@Component
struct Index {model: IndexModelInterface = new IndexModel()viewModel: IndexViewModel = new IndexViewModel()async aboutToAppear() {this.viewModel.articles = await this.model.refreshArticles()}build() {Column() {IndexContent({ viewModel: this.viewModel })}}
}

IndexPreviewer的完整代码如下

@Preview
@Component
struct IndexPreviewer {model: IndexModelInterface = new IndexModelMock()viewModel: IndexViewModel = new IndexViewModel()async aboutToAppear() {this.viewModel.articles = await this.model.refreshArticles()}build() {IndexContent({ viewModel: this.viewModel })}
}

聪明的你一定会想到,这两个struct代码大部分重复,为什么不提取一个基类。别问了,Arkts不支持。@Component struct不支持继承。

Model的实现

最终,真数据和假数据,是在Model里面区分的。
上文中,view model和model都是在界面容器(Index和IndexPreviewer)中持有的。实际上我们``能更进一步,把view model放到model里面。这样,界面容器只和model有耦合,把model里面的view model传到IndexContent里面
IndexModelBase的代码如下

export default abstract class IndexModelBase {abstract refreshArticles(): Promise<Article[]>viewModel: IndexViewModel = new IndexViewModel()async refreshData() {this.viewModel.articles = await this.refreshArticles()}
}

所以IndexModelBase不声明为接口,因为要持有view model,并对里面的articles进行更新。
接下来,让IndexModelBase的子类去实现具体的refreshArticles()方法。IndexModel中,通过网络请求获取数据,更新articlesIndexModelMock中,硬编码假数据给articles
在上文的两个界面容器中,更新数据变得更简单。
以下是Index的最终完整代码

@Entry
@Component
struct Index {model: IndexModelBaseasync aboutToAppear() {this.model = new IndexModel()this.model.refreshData()}build() {Column() {IndexContent({ viewModel: this.model.viewModel })}}
}

以下是IndexPreviewer的最终完整代码

@Entry
@Component
struct IndexPreviewer {model: IndexModelBaseasync aboutToAppear() {this.model = new IndexModelMock()this.model.refreshData()}build() {Column() {IndexContent({ viewModel: this.model.viewModel })}}
}

7ebde29c85a3faa0ae369e2ea9dd3130.jpeg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/685186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GiantPandaCV | 视觉类表面缺陷检测项目相关技术总结

本文来源公众号“GiantPandaCV”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;视觉类表面缺陷检测项目相关技术总结 本文由海滨撰写&#xff0c;首发于GaintPandaCV。 零、前言 做这个方向的项目也有一段时间了&#xff0c;作为…

Deep learning学习笔记

lec 1&#xff1a;Regression 1.5 Linear neural networks for regression线性神经网络的回归 I parameterizing output layer, I handling data, I specifying loss function, I training model. 浅层网络包括线性模型&#xff0c;其中包含了许多经典的统计预测方法&…

C++中的拷贝构造函数

一、拷贝构造函数的概念 拷贝构造函数用于创建一个与已有对象相同的对象&#xff0c;本质上也是构造函数的重载 拷贝构造函数只有一个类型为 const 类类型引用的形参&#xff0c;当我们要创建一个与已存在对象相同的对象时&#xff0c;由编译器自动调用拷贝构造函数。 clas…

简单的edge浏览器插件开发记录

今天在浏览某些网页的时候&#xff0c;我想要屏蔽掉某些信息或者修改网页中的文本的颜色、背景等等。于是在浏览器的控制台中直接输入JavaScript操作dom完成了我想要的功能。但是每次在网页之间跳转该功能都会消失&#xff0c;我需要反复复制粘贴js脚本&#xff0c;无法实现自动…

MATLAB知识点:exprnd函数(★★☆☆☆)生成指数分布的随机数

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第3章&#xff1a;课后习题讲解中拓展的函数 在讲解第三…

【革新你的社交形象】用AI创意头像应用,让你的头像独一无二!

在这个数字化时代&#xff0c;社交媒体已经成为我们生活中不可或缺的一部分。你是否曾经为了找到一个既能表达自己个性&#xff0c;又足够吸引眼球的头像而苦恼&#xff1f;现在&#xff0c;有了我们全新推出的AI创意头像应用&#xff0c;你的这一困扰将成为过去&#xff01; …

React入门到精通:掌握前端开发的必备技能!

介绍&#xff1a;React是一个由Facebook开发和维护的JavaScript库&#xff0c;用于构建用户界面&#xff0c;特别是用于构建单页应用程序和移动应用程序的用户界面。以下是对React的详细介绍&#xff1a; 虚拟DOM&#xff1a;React通过使用虚拟DOM&#xff08;Document Object …

C++的进阶泛型编程学习(2):类模板的机制

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、类模板二、类模板和函数模板的区别1.类模板没有自动类型推导的方式2.类模板在模板参数列表中可以有默认参数 三、类模板对象做函数参数四、类模板与继承4.1…

【Deep Learning 2】神经网络的优化

&#x1f31e;欢迎来到PyTorch的世界 &#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f4c6;首发时间&#xff1a;&#x1f339;2024年2月16日&a…

平滑几何名词

G0: Position (touching) G1: Tangent (angle) G2: Curvature (radius) G3&#xff1a; A G3 path is characterized by a continuously differentiable curvature profile。Acceleration/Torsion (rate of change of curvature 、 sharpness) clothoid: An Euler spi…

2.16C语言学习

P1296 奶牛的耳语 一开始以为是普通的二重循环&#xff0c;结果做出来答案是错的&#xff0c;但是思路不可能有问题&#xff0c;于是抱着试一试的想法加了一个排序&#xff0c;这样就过了&#xff0c;每次在第二重循环里遇到大于最小能听到的距离就跳出循环&#xff0c;进入下…

java8-重构、测试、调试

8.1.1 改善代码的可读性 改善代码的可读性到底意味着什么?我们很难定义什么是好的可读性&#xff0c;因为这可能非常主观。通常的理解是&#xff0c;“别人理解这段代码的难易程度”。改善可读性意味着你要确保你的代码能非常容易地被包括自己在内的所有人理解和维护。为了确保…

在Spring中事务失效的场景

在Spring框架中&#xff0c;事务管理是通过AOP&#xff08;面向切面编程&#xff09;实现的&#xff0c;主要依赖于Transactional注解。然而&#xff0c;在某些情况下&#xff0c;事务可能会失效。以下是一些可能导致Spring事务失效的常见场景&#xff1a; 非public方法&#…

2月16日,每日信息差

第一、2024春节档总观影人次进入影史前二&#xff0c;截至2月16日16时31分&#xff0c;2024年春节档总观影人次达1.46亿&#xff08;含预售&#xff09;&#xff0c;超2018年春节档总观影人次1.45亿&#xff0c;成为中国影史春节档总观影人次第二名。《热辣滚烫》《飞驰人生2》…

阿里云“BGP(多线)”和“BGP(多线)_精品”区别价格对比

阿里云香港等地域服务器的网络线路类型可以选择BGP&#xff08;多线&#xff09;和 BGP&#xff08;多线&#xff09;精品&#xff0c;普通的BGP多线和精品有什么区别&#xff1f;BGP&#xff08;多线&#xff09;适用于香港本地、香港和海外之间的互联网访问。使用BGP&#xf…

悦纳自己:拥抱个人局限,开启成长之旅

悦纳自己&#xff1a;拥抱个人局限&#xff0c;开启成长之旅 在人生的旅途中&#xff0c;我们每个人都会面临无数的挑战和选择。有时我们会因为这些挑战而感到焦虑和不安&#xff0c;因为我们害怕失败&#xff0c;害怕无法达到预期的目标。然而&#xff0c;真正重要的是我们如何…

Selenium实战教程系列(三)--- Selenium中的动作

Selenium中针对元素进行的动作在代码中可以分为两类&#xff1a; Selenium::WebDriver::ActionBuilder类中的动作方法Selenium::WebDriver::Element类中的动作方法 其中ActionBuilder类中的动作方法比较丰富&#xff0c;基本涵盖了所有可以进行的操作。 而Element类的动作比较…

12.16 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 2024届比亚迪博士招聘 校招 | 2024届比亚迪博士招聘 2、校招 | 长光卫星2024校招热门岗位补招中 校招 | 长光卫星2024校招热门岗位补招中 3、校招 | 云道智造2024全球校园招聘 …

Linux目录结构

Linux常用目录结构 /&#xff1a;根目录存放在系统的所有文件 ~&#xff1a;一般特指当前用户的家目录。root用户一般为&#xff1a;/root&#xff0c;普通用户为&#xff1a;/home/用户名 /home&#xff1a;新用户新建时&#xff0c;会在此目录建立新的用户文件&#xff0c;…

C#系列-​​​​​​​EntityFrameworkCore.Transactions.Abstractions应用场景+实例(38)

EntityFrameworkCore.Transactions.Abstractions应用场景 EntityFrameworkCore.Transactions.Abstractions 并不是一个官方的或广泛认可的 NuGet 包名称。在 Entity Framework Core (EF Core) 中&#xff0c;事务管理通常是通过 DbContext 的内置方法来实现的&#xff0c;如 Sa…