当前位置：网站首页>【Harmony OS】【ArkUI】ets开发基础页面布局与数据连接

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

2022-08-09 04:44:00 【华为开发者论坛】

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

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

1. 构建数据模型。

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

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

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

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

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

3) 存入食物图片资源。在resources > base > media目录下存入食物图片资源，笔者这里不究细节，就只用一个icon.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。

2. 构建列表List布局。

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

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

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

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

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

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

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

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

3. 构建列表Grid布局。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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