Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 6a49287c 编写于 作者: S sienna1128
浏览文件
操作

update docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 2cc84540
显示空白变更内容
内联 并排
Showing with 51 addition and 35 deletion
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @ 6a49287c
# 创建简单视图
在这一小节中，以食物详情页的开发为例，学习如何通过容器组件Stack、Flex和基础组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍页开发。
在这一小节中，我们将开始食物详情页的开发，学习如何通过容器组件Stack、Flex和基础组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍。
在创建页面前，请先创建eTS工程，FA模型请参考[创建FA模型的eTS工程](..//quick-start/start-with-ets-fa.md#创建ets工程)，Stage模型请参考[创建Stage模型的eTS工程](../quick-start/start-with-ets-stage.md#创建ets工程)。
在创建页面前，请先创建eTS工程，FA模型请参考[创建FA模型的eTS工程](../quick-start/start-with-ets-stage.md#创建ets工程)，Stage模型请参考[创建Stage模型的eTS工程](..//quick-start/start-with-ets-fa.md#创建ets工程)。
## 构建Stack布局
1. 创建食物名称。
在index.ets文件中，创建Stack组件，将Text组件放进Stack组件的花括号中，使其成为Stack组件的子组件。Stack组件可以包含一个或多个子组件。
在index.ets文件中，创建Stack组件，将Text组件放进Stack组件的花括号中，使其成为Stack组件的子组件。Stack组件为堆叠组件，可以包含一个或多个子组件，其特点是后一个子组件覆盖前一个子组件。
```ts
@Entry
......@@ -28,7 +28,7 @@
![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png)
2. 食物图片展示。
创建Image组件，指定Image组件的的url，即图片的资源url。由于Stack的堆叠特性，为了让Text组件在Image组件上方显示，所以要先声明Image组件后声明Text组件。图片资源放在resources下的rawfile文件夹内，使用`$rawfile('filename')`的形式引用rawfile下的filename文件。当前`$rawfile`仅支持在Image控件中引用图片资源。
创建Image组件，指定Image组件的url，Image组件是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用`$rawfile('filename')`的形式，filename为rawfile目录下的文件相对路径。当前`$rawfile`仅支持Image控件引用图片资源。
```ts
@Entry
......@@ -46,7 +46,7 @@
```
![zh-cn_image_0000001168410342](figures/zh-cn_image_0000001168410342.png)
![zh-cn_image_0000001168410342](figures/zh-cn_image_0000001168410342.png)
3. 通过资源访问图片。
除指定图片路径外，也可以使用引用媒体资源符$r引用资源，需要遵循resources文件夹的资源限定词的规则。右键resources文件夹，点击New&gt;Resource Directory，选择Resource Type为Media（图片资源）。
......@@ -95,7 +95,7 @@
![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png)
5. 设置食物图片和名称对齐方式。设置Stack布局的对齐方式为底部起始端对齐，即设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样，都是框架提供的内置枚举类型。
5. 设置食物图片和名称布局。设置Stack的对齐方式为底部起始端对齐，Stack默认为居中对齐。设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样，都是框架提供的内置枚举类型。
```ts
@Entry
......@@ -116,7 +116,7 @@
![zh-cn_image_0000001168728872](figures/zh-cn_image_0000001168728872.png)
6. 调整Text组件的外边距margin。通过margin调整组件与其他组件四个方向的间距。margin的设置方式如下：
6. 调整Text组件的外边距margin，使其距离左侧和底部有一定的距离。margin是简写属性，可以统一指定四个边的外边距，也可以分别指定。具体设置方式如下：
1. 参数为Length时，即统一指定四个边的外边距，比如margin(20)，即上、右、下、左四个边的外边距都是20。
2. 参数为{top?: Length, right?: Length, bottom?: Length, left?:Length}，即分别指定四个边的边距，比如margin({ left: 26, bottom: 17.4 })，即左边距为26，下边距为17.4。
......@@ -141,7 +141,9 @@
![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png)
7. 组件封装引用。将上面相对独立的ui单元封装为@Component，语义化组件名称为FoodImageDisplay。创建页面入口组件为FoodDetail，在FoodDetail中创建Column，设置水平方向上居中对齐alignItems(HorizontalAlign.Center)，并通过FoodImageDisplay()引用ui组件。
7. 调整组件间的结构，语义化组件名称。创建页面入口组件为FoodDetail，在FoodDetail中创建Column，设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)。MyComponent组件名改为FoodImageDisplay，为FoodDetail的子组件。
Column是子组件竖直排列的容器组件，本质为线性布局，所以只能设置交叉轴方向的对齐。
```ts
@Component
......@@ -175,7 +177,7 @@
开发者可以使用Flex弹性布局来构建食物的食物成分表，弹性布局在本场景的优势在于可以免去多余的宽高计算，通过比例来设置不同单元格的大小，更加灵活。
1. 创建ContentTable组件，并在页面入口组件FoodDetail中引用该组件。
1. 创建ContentTable组件，使其成为页面入口组件FoodDetail的子组件。
```ts
@Component
......@@ -194,7 +196,7 @@
}
@Component
struct ContentTable { // 创建ContentTable组件
struct ContentTable {
build() {
}
}
......@@ -212,7 +214,10 @@
}
```
2. 通过Flex组件展示食物热量。创建Flex组件，高度为280，上、右、左内边距为30，包含三个Text子组件分别代表类别名（Calories），含量名称（Calories）和含量数值（17kcal）。Flex组件默认为水平排列方式。
2. 创建Flex组件展示Tomato两类成分。
一类是热量Calories，包含卡路里（Calories）；一类是营养成分Nutrition，包含蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）。
先创建热量这一类。创建Flex组件，高度为280，上、右、左内边距为30，包含三个Text子组件分别代表类别名（Calories），含量名称（Calories）和含量数值（17kcal）。Flex组件默认为水平排列方式。
已省略FoodImageDisplay代码，只针对ContentTable进行扩展。
......@@ -250,7 +255,7 @@
![zh-cn_image_0000001169759552](figures/zh-cn_image_0000001169759552.png)
3. 调整食物热量布局，设置各部分占比。外层Flex中，分类名占总空间的1/3（layoutWeight为1），成分名和成分含量一共占2/3（layoutWeight为2）。成分名和成分含量位于同一个Flex中，设置flexGrow(1)使成分名占据所有剩余空间。
3. 调整布局，设置各部分占比。分类名占比（layoutWeight）为1，成分名和成分含量一共占比（layoutWeight）2。成分名和成分含量位于同一个Flex中，成分名占据所有剩余空间flexGrow(1)。
```ts
@Component
......@@ -305,8 +310,8 @@
![zh-cn_image_0000001215079443](figures/zh-cn_image_0000001215079443.png)
4. 仿照热量分类创建营养成分分类。营养成分Nutrition，包含蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）。后三个成分在表格中省略分类名，用空格代替。
设置外层Flex为竖直排列FlexDirection.Column， 在主轴方向（竖直方向）上等距排列FlexAlign.SpaceBetween，在交叉轴方向（水平方向）上首部对齐排列ItemAlign.Start。
4. 仿照热量分类创建营养成分分类。营养成分部分（Nutrition）包含：蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）四个成分，后三个成分在表格中省略分类名，用空格代替。
设置外层Flex为竖直排列FlexDirection.Column， 在主轴方向（竖直方向）上等距排列FlexAlign.SpaceBetween，在交叉轴方向（水平轴方向）上首部对齐排列ItemAlign.Start。
```ts
@Component
......@@ -402,12 +407,12 @@
}
```
5. 使用自定义构造函数\@Builder简化代码。可以发现，每个成分表中的成分单元都是一样的UI结构。
5. 使用自定义构造函数\@Builder简化代码。可以发现，每个成分表中的成分单元其实都是一样的UI结构。
![zh-cn_image_0000001169599582](figures/zh-cn_image_0000001169599582.png)
当前对每个成分单元都进行了声明，造成了代码的重复和冗余。可以使用\@Builder来构建自定义方法，抽象出相同的UI结构声明。\@Builder修饰的方法和\@Component的build方法都是为了声明一些UI渲染结构，遵循一样的ArkTS语法。开发者可以定义一个或者多个\@Builder修饰的方法，但\@Component的build方法必须只有一个。
当前对每个成分单元都进行了声明，造成了代码的重复和冗余。可以使用\@Builder来构建自定义方法，抽象出相同的UI结构声明。\@Builder修饰的方法和Component的build方法都是为了声明一些UI渲染结构，遵循一样的ArkTS语法。开发者可以定义一个或者多个\@Builder修饰的方法，但Component的build方法必须只有一个。
在ContentTable内声明\@Builder修饰的IngredientItem方法，并传入分类名、成分名称和成分含量用于生成不同成分单元的UI描述。
在ContentTable内声明\@Builder修饰的IngredientItem方法，用于声明分类名、成分名称和成分含量UI描述。
```ts
@Component
......@@ -431,7 +436,7 @@
}
```
在ContentTable的build方法内调用IngredientItem接口，需要用this去调用\@Component作用域内的方法，以此来区分全局的方法调用。
在ContentTable的build方法内调用IngredientItem接口，需要用this去调用该Component作用域内的方法，以此来区分全局的方法调用。
```ts
@Component
......@@ -451,7 +456,7 @@
}
```
ContentTable组件优化后整体代码如下。
ContentTable组件整体代码如下。
```ts
@Component
......@@ -486,11 +491,22 @@
}
}
@Entry
@Component
struct FoodDetail {
build() {
Column() {
FoodImageDisplay()
ContentTable()
}
.alignItems(HorizontalAlign.Center)
}
}
```
![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png)
本小节通过Stack布局和Flex布局已完成食物的图文和营养成分表展示，构建了第一个普通视图的食物详情页。在下一个章节中，将学习页面间跳转和数据传递，现在我们就进入下一个章节的学习吧。
通过学习Stack布局和Flex布局已完成食物的图文展示和营养成分表，构建出第一个普通视图的食物详情页。在下一个章节中，将开发食物分类列表页，并完成食物分类列表页面和食物详情页面的跳转和数据传递，现在我们就进入下一个章节的学习吧。
## 相关实例
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或