> 文档中心 > 【Harmony OS】【ArkUI】ets开发 基础页面布局与数据连接

【Harmony OS】【ArkUI】ets开发 基础页面布局与数据连接

  前言:本篇是以HarmonyOS官网的基于TS扩展的声明式开发范式文档,页面布局与连接为基础进行编写。尽管原篇已非常精简,但是作为初学者想要快速入门,使用ets方式实现出List布局、Grid布局、数据连接及页面跳转功能,还是稍显晦涩。所以笔者将原文进行整合,提取出其中的要点,以便通俗易懂地呈现给读者,希望能帮助你快速了解Harmony的ETS开发,学会简单的布局与数据连接。本篇最后会贴上参考原文链接。

 

  首先讲一下大致的思路,我们要实现一个简单的List页面布局、一个简单的Grid页面布局,点击页面右上角的按钮可以进行两个布局页面的跳转。List布局和Grid布局中的每个item都对应着一条数据,并且也可以进行点击跳转到简单的detail页面。所以笔者将整个功能的实现分为了四个步骤,构建数据模型、构建列表List布局、构建列表Grid布局、页面跳转与数据传递,这与原篇大致相同。

1.         构建数据模型。

做菜首先需要备菜,数据模型是整个程序的内容,我们需要先准备好。但是因为我们是快速入门,就不需要细究细节,只要符合大概的逻辑即可。

这次我们需要准备的数据模型是食物数据模型,每个食物有食物名称、卡路里、蛋白质、脂肪、碳水和维生素C的字段。

1)       新建model文件夹,在model目录下创建FoodData.ets。

cke_2856.png

2)       定义食物数据的存储模型FoodData和枚举变量Category,FoodData类包含食物id、名称(name)、分类(category)、图片(image)、热量(calories)、蛋白质(protein)、脂肪(fat)、碳水(carbohydrates)和维生素C(vitaminC)属性。

*eTS语言是在ts语言的基础上的扩展,同样支持ts语法。

cke_4814.png

3)       存入食物图片资源。在resources > base > media目录下存入食物图片资源,笔者这里不究细节,就只用一个icon.png代替了。

cke_7655.png

4)       创建食物资源数据。在model文件夹下创建FoodDataModels.ets,在该页面中声明食物成分数组FoodComposition

以12个食物数据为例,实际开发中,开发者可以自定义更多的数据资源,当食物资源很多时,建议使用数据懒加载LazyForEach。以下营养数据均来自网络。

创建initializeOnStartUp方法来初始化FoodData的数组。在FoodDataModels.ets中使用了定义在FoodData.ets的FoodData和Category,所以要将FoodData.ets的FoodData类export,在FoodDataModels.ets内import FoodData和Category

cke_12426.png

2.         构建列表List布局。

数据是整个程序的内容与血肉,页面布局则是整体的框架和骨骼。现在数据模型已经准备好,开始搭建整个程序的框架和构建整体的页面布局。

首先构建一个List列表布局,使用List组件和ForEach循环渲染。这里的List列表就和Android中的ListView有一点相似,大致的功能就是我们日常使用的APP的下拉列表。

1)       在pages目录新建页面FoodCategoryList.ets,将index.ets改名为FoodDetail.ets,并将其添加到config.json文件下的pages标签,位于第一序位的页面为首页。

cke_17471.png

2)       FoodCategoryList.ets引入FoodData类和initializeOnStartup方法。

cke_23812.png

3)       新建FoodList组件作为页面入口组件,FoodListItem为其子组件。List组件是列表组件,适用于重复同类数据的展示,其子组件为ListItem,适用于展示列表中的单元。

cke_30667.png

4)       给FoodListItem添加一些细节。添加图片和内容。

cke_37483.png

5)       给FoodList添加一些细节。添加标题,引入ForEach循环渲染每一条item

cke_44804.png

6)       打开模拟器或者预览器,即可查看实现的List列表的效果。

cke_57591.png

3.         构建列表Grid布局。

上面我们使用ets开发实现了List列表的功能,接下来我们使用ets来开发实现Grid列表。Grid列表其实就是网格列表功能,和Android中的GridView有点类似。

页面布局上可以提供给用户两种显示方式:列表显示和网格显示,实现通过页签切换不同分类的列表和网格布局。

1)       将Category枚举类型引入FoodCategoryList页面,并且将原来引入FoodData的类注释掉。

cke_65865.png

2)       新建FoodGrid组件作为页面入口组件,FoodGridItem为其子组件。Grid组件是网格组件,适用于重复同类数据的展示,其子组件为GridItem,适用于展示列表中的单元。

cke_75179.png

3)       给FoodGridItem添加一些细节。展示食物图片、名称和卡路里,实现其UI布局,为GridItem的子组件。每个FoodGridItem高度为184,行间距为8,设置Grid总高度为(184 + 8) * 6 - 8 = 1144

cke_85301.png

4)       给FoodGrid添加一些细节。实现2 * 6的网格布局(一共12个食物数据资源)。创建Grid组件,设置列数columnsTemplate('1fr 1fr'),行数rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr'),行间距和列间距rowsGap和columnsGap为8。创建Scroll组件,使其可以滑动。

cke_96458.png

5)       创建FoodCategoryList和FoodCategory组件,其中FoodCategoryList作为新的页面入口组件,在入口组件调用initializeOnStartup方法。将原来的FoodList类的initializeOnStartup方法和@Entry去除。

cke_108344.png

6)       给FoodCategory添加一些细节。创建展示蔬菜(Category.Vegetable)、水果(Category.Fruit)、坚果(Category.Nut)、海鲜(Category.SeaFood)和甜品(Category.Dessert)分类的页签。

cke_119707.png

7)       给FoodCategoryList添加一些细节。在FoodCategoryList组件内创建showList成员变量,用于控制List布局和Grid布局的渲染切换。需要用到条件渲染语句if...else...。在页面右上角创建切换List/Grid布局的图标。设置Stack对齐方式为顶部尾部对齐TopEnd,创建Image组件,设置其点击事件,即showList取反。添加@State装饰器。点击右上角的switch标签后,页面没有任何变化,这是因为showList不是有状态数据,它的改变不会触发页面的刷新。需要为其添加@State装饰器,使其成为状态数据,它的改变会引起其所在组件的重新渲染。

cke_133072.png

8)       打开模拟器或者预览器,即可查看实现的List列表的效果。点击上面一排tab可以进行标签切换,展示不同标签对应的内容。点击右上角可以进行list和grid的切换。

cke_145849.png

 

4.         页面跳转与数据传递。

上面我们已经完成了页面布局的搭建和读取数据模型,接下来需要实现页面跳转和数据传递的功能。其实在上面两个页面布局切换就已经用到了页面跳转,这次要实现的是list和grid的item点击时跳转到详情界面,还有页面跳转时的数据传递功能。

页面跳转:点击食物分类列表页面的食物条目后,跳转到食物详情页;点击食物详情页的返回按钮,返回到食物列表页。

页面间数据传递:点击不同的食物条目后,FoodDetail接受前一个页面的数据,渲染对应的食物详情页。。

1)         点击FoodListItem后跳转到FoodDetail页面。在FoodListItem内创建Navigator组件,使其子组件都具有路由功能,目标页面target为'pages/FoodDetail'

点击FoodGridItem后跳转到FoodDetail页面。调用页面路由router模块的push接口,将FoodDetail页面推到路由栈中,实现页面跳转。使用router路由API接口,需要先引入router

这我们在上面都已添加,只需要再引入router

cke_160345.png

2)         在FoodDetail页面增加回到食物列表页面的图标。在resources > phone > media文件夹下存入回退图标Back.png。新建自定义组件PageTitle,包含后退的图标和Food Detail的文本,调用路由的router.back()接口,弹出路由栈最上面的页面,即返回上一级页面。

cke_175243.png

3)         在FoodDetail组件内创建Stack组件,包含子组件FoodImageDisplay和PageTitle子组件,设置其对齐方式为左上对齐TopStart

cke_190672.png

4)         FoodDetail页面router模块,引入FoodData类,在FoodDetail组件内添加foodItem成员变量。

cke_207584.png

5)         重构FoodDetail页面的组件。创建FoodImageDisplay类和ContentTable类,用于图片和内容展示。

cke_224984.png

cke_237589.png

6)         打开模拟器或者预览器,即可查看实现的List列表的效果。

cke_254314.png

以上,本次的内容分享,谢谢!

参考原文链接:

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-ts-building-data-model-0000001146785866