diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/richText.png b/zh-cn/application-dev/reference/arkui-ts/figures/richText.png new file mode 100644 index 0000000000000000000000000000000000000000..1520a854a9baed9fcc4e50e989bbfb4e83acf487 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/richText.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md index 1ac29d0fe113890b4565a0fa235c2e4307c521fc..2bc0322f27d016b6d0ae55eec0dcde7cf8f11e07 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md @@ -79,4 +79,6 @@ struct RichTextExample { } } } -``` \ No newline at end of file +``` + + ![richText](figures/richText.png) \ No newline at end of file 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 f9ef0596f48ebcb930dda2f94e594fa1e33788dd..a58772dcd84f01f7d4e52c8bd7a7a2e9430e4727 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,6 +1,6 @@ # 创建简单视图 -在这一小节中，我们将开始食物详情页的开发，学习如何通过容器组件Stack、Flex和基本组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍。 +在这一小节中，我们将开始食物详情页的开发，学习如何通过容器组件Stack、Flex和基础组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍。 ## 构建Stack布局 @@ -24,7 +24,8 @@ ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png) 2. 食物图片展示。 - 创建Image组件，指定Image组件的url，Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用`$rawfile('filename')`的形式，filename为rawfile目录下的文件相对路径。当前`$rawfile`仅支持Image控件引用图片资源。 + 创建Image组件，指定Image组件的url，Image组件是必选构造参数组件。为了让Text组件在Image组件上方显示，所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内，引用rawfile下资源时使用`$rawfile('filename')`的形式，filename为rawfile目录下的文件相对路径。当前`$rawfile`仅支持Image控件引用图片资源。 + ``` @Entry @Component @@ -40,15 +41,16 @@ } ``` - ![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>Resource Directory，选择Resource Type为Media（图片资源）。 将Tomato.png放入media文件夹内。就可以通过`$r('app.type.name')`的形式引用应用资源，即`$r('app.media.Tomato')`。 - ``` - @Entry +``` +@Entry @Component struct MyComponent { build() { @@ -62,7 +64,8 @@ } } } - ``` +``` + 4. 设置Image宽高，并且将image的objectFit属性设置为ImageFit.Contain，即保持图片长宽比的情况下，使得图片完整地显示在边界内。 如果Image填满了整个屏幕，原因如下： @@ -70,8 +73,8 @@ 2. Image的objectFit默认属性是ImageFit.Cover，即在保持长宽比的情况下放大或缩小，使其填满整个显示边界。 - ``` - @Entry +``` +@Entry @Component struct MyComponent { build() { @@ -85,13 +88,15 @@ } } } - ``` +``` + ![zh-cn_image_0000001214210217](figures/zh-cn_image_0000001214210217.png) 5. 设置食物图片和名称布局。设置Stack的对齐方式为底部起始端对齐，Stack默认为居中对齐。设置Stack构造参数alignContent为Alignment.BottomStart。其中Alignment和FontWeight一样，都是框架提供的内置枚举类型。 - ``` - @Entry + +``` +@Entry @Component struct MyComponent { build() { @@ -105,16 +110,21 @@ } } } - ``` +``` + ![zh-cn_image_0000001168728872](figures/zh-cn_image_0000001168728872.png) -6. 通过设置Stack的背景颜色来改变食物图片的背景颜色，设置颜色有两种方式： +6. 通过设置Stack的背景颜色来改变食物图片的背景颜色，设置颜色有四种方式： 1. 通过框架提供的Color内置枚举值来设置，比如backgroundColor(Color.Red)，即设置背景颜色为红色。 2. string类型参数，支持的颜色格式有：rgb、rgba和HEX颜色码。比如backgroundColor('\#0000FF')，即设置背景颜色为蓝色，backgroundColor('rgb(255, 255, 255)')，即设置背景颜色为白色。 + 3. number类型参数，支持十六进制颜色值。比如backgroundColor(0xFF0000)，即设置背景颜色为红色。 + + 4. Resource类型参数请参考[资源访问](ts-resource-access.md) 。 + - ``` - @Entry +``` +@Entry @Component struct MyComponent { build() { @@ -128,8 +138,9 @@ } .backgroundColor('#FFedf2f5') } - } - ``` +} +``` + ![zh-cn_image_0000001168888822](figures/zh-cn_image_0000001168888822.png) @@ -137,8 +148,8 @@ 1. 参数为Length时，即统一指定四个边的外边距，比如margin(20)，即上、右、下、左四个边的外边距都是20。 2. 参数为{top?: Length, right?: Length, bottom?: Length, left?:Length}，即分别指定四个边的边距，比如margin({ left: 26, bottom: 17.4 })，即左边距为26，下边距为17.4。 - ``` - @Entry +``` +@Entry @Component struct MyComponent { build() { @@ -154,15 +165,16 @@ .backgroundColor('#FFedf2f5') } } - ``` +``` + ![zh-cn_image_0000001213968747](figures/zh-cn_image_0000001213968747.png) 8. 调整组件间的结构，语义化组件名称。创建页面入口组件为FoodDetail，在FoodDetail中创建Column，设置水平方向上居中对齐 alignItems(HorizontalAlign.Center)。MyComponent组件名改为FoodImageDisplay，为FoodDetail的子组件。 Column是子组件竖直排列的容器组件，本质为线性布局，所以只能设置交叉轴方向的对齐。 - ``` - @Component +``` +@Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -188,7 +200,8 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + ## 构建Flex布局 @@ -196,8 +209,9 @@ 开发者可以使用Flex弹性布局来构建食物的食物成分表，弹性布局在本场景的优势在于可以免去多余的宽高计算，通过比例来设置不同单元格的大小，更加灵活。 1. 创建ContentTable组件，使其成为页面入口组件FoodDetail的子组件。 - ``` - @Component + +``` +@Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -229,7 +243,8 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + 2. 创建Flex组件展示Tomato两类成分。 一类是热量Calories，包含卡路里（Calories）；一类是营养成分Nutrition，包含蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）。 @@ -238,8 +253,8 @@ 已省略FoodImageDisplay代码，只针对ContentTable进行扩展。 - ``` - @Component +``` +@Component struct ContentTable { build() { Flex() { @@ -267,13 +282,15 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + ![zh-cn_image_0000001169759552](figures/zh-cn_image_0000001169759552.png) 3. 调整布局，设置各部分占比。分类名占比（layoutWeight）为1，成分名和成分含量一共占比（layoutWeight）2。成分名和成分含量位于同一个Flex中，成分名占据所有剩余空间flexGrow(1)。 - ``` - @Component + +``` +@Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -322,15 +339,16 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + ![zh-cn_image_0000001215079443](figures/zh-cn_image_0000001215079443.png) 4. 仿照热量分类创建营养成分分类。营养成分部分（Nutrition）包含：蛋白质（Protein）、脂肪（Fat）、碳水化合物（Carbohydrates）和维生素C（VitaminC）四个成分，后三个成分在表格中省略分类名，用空格代替。 设置外层Flex为竖直排列FlexDirection.Column， 在主轴方向（竖直方向）上等距排列FlexAlign.SpaceBetween，在交叉轴方向（水平轴方向）上首部对齐排列ItemAlign.Start。 - ``` - @Component +``` +@Component struct ContentTable { build() { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { @@ -421,7 +439,8 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + 5. 使用自定义构造函数\@Builder简化代码。可以发现，每个成分表中的成分单元其实都是一样的UI结构。 ![zh-cn_image_0000001169599582](figures/zh-cn_image_0000001169599582.png) @@ -430,8 +449,8 @@ 在ContentTable内声明\@Builder修饰的IngredientItem方法，用于声明分类名、成分名称和成分含量UI描述。 - ``` - @Component +``` + @Component struct ContentTable { @Builder IngredientItem(title:string, name: string, value: string) { Flex() { @@ -450,12 +469,13 @@ } } } - ``` +``` - 在ContentTable的build方法内调用IngredientItem接口，需要用this去调用该Component作用域内的方法，以此来区分全局的方法调用。 - ``` - @Component + 在ContentTable的build方法内调用IngredientItem接口，需要用this去调用该Component作用域内的方法，以此来区分全局的方法调用。 + +``` +@Component struct ContentTable { ...... build() { @@ -470,12 +490,13 @@ .padding({ top: 30, right: 30, left: 30 }) } } - ``` +``` - ContentTable组件整体代码如下。 - ``` - @Component + ContentTable组件整体代码如下。 + +``` +@Component struct ContentTable { @Builder IngredientItem(title:string, name: string, value: string) { Flex() { @@ -494,17 +515,18 @@ } } - build() { - Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { - this.IngredientItem('Calories', 'Calories', '17kcal') - this.IngredientItem('Nutrition', 'Protein', '0.9g') - this.IngredientItem('', 'Fat', '0.2g') - this.IngredientItem('', 'Carbohydrates', '3.9g') - this.IngredientItem('', 'VitaminC', '17.8mg') - } - .height(280) - .padding({ top: 30, right: 30, left: 30 }) - } + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', '17kcal') + this.IngredientItem('Nutrition', 'Protein', '0.9g') + this.IngredientItem('', 'Fat', '0.2g') + this.IngredientItem('', 'Carbohydrates', '3.9g') + this.IngredientItem('', 'VitaminC', '17.8mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } + } @Entry @@ -518,7 +540,8 @@ .alignItems(HorizontalAlign.Center) } } - ``` +``` + ![zh-cn_image_0000001215199399](figures/zh-cn_image_0000001215199399.png)