!10345 挑单3.2beta3

Merge pull request !10345 from 田雨/cherry-pick-1665225413

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

zh-cn/application-dev/ui/ui-ts-creating-simple-page.md

 # 创建简单视图
 
-在这一小节中，我们将开始食物详情页的开发，学习如何通过容器组件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)