diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-types.md b/zh-cn/application-dev/reference/arkui-ts/ts-types.md index a55b163537c12541dd54949a685f317c02ea83a8..f40f82f94f5851cb0575872c3911ae8300178e48 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-types.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-types.md @@ -155,6 +155,8 @@ | height | [Length](#length) | 目标元素的高度，作为返回值时，类型为number，单位vp。 | | position | [Position](#position8) | 目标元素左上角相对父元素左上角的位置。 | | globalPosition | [Position](#position8) | 目标元素左上角相对页面左上角的位置。 | +| pos(deprecated) | [Position](#position8) | 目标元素左上角相对父元素左上角的位置。 | +| globalPos(deprecated) | [Position](#position8) | 目标元素左上角相对页面左上角的位置。 | ## Position8+ diff --git a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md index ca4fe0bd1e5f2f04a8e2aba9d881f0a37f3ac969..c42949b014bdc9bb7d0fae6aa5cf6a446d5d7cb7 100644 --- a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md +++ b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md @@ -1,15 +1,15 @@ # 创建简单视图 -在这一小节中，我们将开始食物详情页的开发，学习如何通过容器组件Stack、Flex和基础组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍。 +在这一小节中，以食物详情页的开发为例，学习如何通过容器组件Stack、Flex和基础组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍页开发。 -在创建页面前，请先创建eTS工程，FA模型请参考[创建FA模型的eTS工程](../quick-start/start-with-ets-stage.md#创建ets工程)，Stage模型请参考[创建Stage模型的eTS工程](..//quick-start/start-with-ets-fa.md#创建ets工程)。 +在创建页面前，请先创建eTS工程，FA模型请参考[创建FA模型的eTS工程](..//quick-start/start-with-ets-fa.md#创建ets工程)，Stage模型请参考[创建Stage模型的eTS工程](../quick-start/start-with-ets-stage.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，Image组件是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用`$rawfile('filename')`的形式，filename为rawfile目录下的文件相对路径。当前`$rawfile`仅支持Image控件引用图片资源。 + 创建Image组件，指定Image组件的的url，即图片的资源url。由于Stack的堆叠特性，为了让Text组件在Image组件上方显示，所以要先声明Image组件后声明Text组件。图片资源放在resources下的rawfile文件夹内，使用`$rawfile('filename')`的形式引用rawfile下的filename文件。当前`$rawfile`仅支持在Image控件中引用图片资源。 ```ts @Entry @@ -95,7 +95,7 @@ ![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png) -5. 设置食物图片和名称布局。设置Stack的对齐方式为底部起始端对齐，Stack默认为居中对齐。设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样，都是框架提供的内置枚举类型。 +5. 设置食物图片和名称对齐方式。设置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是简写属性，可以统一指定四个边的外边距，也可以分别指定。具体设置方式如下： +6. 调整Text组件的外边距margin。通过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,9 +141,7 @@ ![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png) -7. 调整组件间的结构，语义化组件名称。创建页面入口组件为FoodDetail，在FoodDetail中创建Column，设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)。MyComponent组件名改为FoodImageDisplay，为FoodDetail的子组件。 - - Column是子组件竖直排列的容器组件，本质为线性布局，所以只能设置交叉轴方向的对齐。 +7. 组件封装引用。将上面相对独立的ui单元封装为@Component，语义化组件名称为FoodImageDisplay。创建页面入口组件为FoodDetail，在FoodDetail中创建Column，设置水平方向上居中对齐alignItems(HorizontalAlign.Center)，并通过FoodImageDisplay()引用ui组件。 ```ts @Component @@ -177,7 +175,7 @@ 开发者可以使用Flex弹性布局来构建食物的食物成分表，弹性布局在本场景的优势在于可以免去多余的宽高计算，通过比例来设置不同单元格的大小，更加灵活。 -1. 创建ContentTable组件，使其成为页面入口组件FoodDetail的子组件。 +1. 创建ContentTable组件，并在页面入口组件FoodDetail中引用该组件。 ```ts @Component @@ -196,7 +194,7 @@ } @Component - struct ContentTable { + struct ContentTable { // 创建ContentTable组件 build() { } } @@ -214,10 +212,7 @@ } ``` -2. 创建Flex组件展示Tomato两类成分。 - 一类是热量Calories，包含卡路里（Calories）；一类是营养成分Nutrition，包含蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）。 - - 先创建热量这一类。创建Flex组件，高度为280，上、右、左内边距为30，包含三个Text子组件分别代表类别名（Calories），含量名称（Calories）和含量数值（17kcal）。Flex组件默认为水平排列方式。 +2. 通过Flex组件展示食物热量。创建Flex组件，高度为280，上、右、左内边距为30，包含三个Text子组件分别代表类别名（Calories），含量名称（Calories）和含量数值（17kcal）。Flex组件默认为水平排列方式。 已省略FoodImageDisplay代码，只针对ContentTable进行扩展。 @@ -255,7 +250,7 @@ ![zh-cn_image_0000001169759552](figures/zh-cn_image_0000001169759552.png) -3. 调整布局，设置各部分占比。分类名占比（layoutWeight）为1，成分名和成分含量一共占比（layoutWeight）2。成分名和成分含量位于同一个Flex中，成分名占据所有剩余空间flexGrow(1)。 +3. 调整食物热量布局，设置各部分占比。外层Flex中，分类名占总空间的1/3（layoutWeight为1），成分名和成分含量一共占2/3（layoutWeight为2）。成分名和成分含量位于同一个Flex中，设置flexGrow(1)使成分名占据所有剩余空间。 ```ts @Component @@ -310,8 +305,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 @@ -407,12 +402,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 @@ -436,7 +431,7 @@ } ``` - 在ContentTable的build方法内调用IngredientItem接口，需要用this去调用该Component作用域内的方法，以此来区分全局的方法调用。 + 在ContentTable的build方法内调用IngredientItem接口，需要用this去调用\@Component作用域内的方法，以此来区分全局的方法调用。 ```ts @Component @@ -456,7 +451,7 @@ } ``` - ContentTable组件整体代码如下。 + ContentTable组件优化后整体代码如下。 ```ts @Component @@ -491,25 +486,14 @@ } } - @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布局已完成食物的图文和营养成分表展示，构建了第一个普通视图的食物详情页。在下一个章节中，将学习页面间跳转和数据传递，现在我们就进入下一个章节的学习吧。 ## 相关实例 - + 针对创建简单视图，有以下示例工程可供参考： - [`BuildCommonView`：创建简单视图（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/BuildCommonView)