!15257 【3.2-Beta5】翻译完成 14845：update zh-cn/application-dev/ui/ui-ts-creating-simple-page.md

Merge pull request !15257 from ester.zhou/cherry-pick-1677465347

en/application-dev/ui/ui-ts-creating-simple-page.md

@@ -2,7 +2,7 @@
 
 In this section, we will develop an infographic food details page, by building custom components through the container components **\<Stack>** and **\<Flex>** as well as basic components **\<Image>** and **\<Text>**.
 
-Before creating a page, create an ArkTS project. For details, see [Creating an ArkTS Project in FA model](../quick-start/start-with-ets-stage.md#creating-an-arkts-project) or [Creating an ArkTS Project in Stage model](../quick-start/start-with-ets-fa.md#creating-an-arkts-project).
+Before creating a page, create an ArkTS project. For details, see [Creating an ArkTS Project in Stage Model](../quick-start/start-with-ets-stage.md#creating-an-arkts-project) or [Creating an ArkTS Project in FA Model](../quick-start/start-with-ets-fa.md#creating-an-arkts-project).
 
 
 ## Building the Stack Layout
@@ -28,8 +28,9 @@ Before creating a page, create an ArkTS project. For details, see [Creating an A
    ![en-us_image_0000001214128687](figures/en-us_image_0000001214128687.png)
    
 2. Display food pictures.
+   
    Create an **\<Image>** component and specify a URL for it. To display the **\<Text>** component above the **\<Image>** component, declare the **\<Image>** component first. Image resources are stored in the **rawfile** folder in **resources**. When referencing the resources in the **rawfile** folder, use the `$rawfile('filename')` format, where **filename** indicates the relative path of the file in the **rawfile** folder. `$rawfile` only allows the **\<Image>** component to reference image resources.
-
+   
    ```ts
    @Entry
    @Component
@@ -45,14 +46,14 @@ Before creating a page, create an ArkTS project. For details, see [Creating an A
    }
    ```
 
-
    ![en-us_image_0000001168410342](figures/en-us_image_0000001168410342.png)
 
 3. Access images through resources.
+   
    In addition to specifying the image path, you can also use the media resource symbol **$r** to reference resources based on the resource qualifier rules in the **resources** folder. Right-click the **resources** folder, choose **New** > **Resource Directory** from the shortcut menu, and set **Resource Type** to **Media** (image resource).
-
+   
    Place **Tomato.png** in the **media** folder. You can then reference the application resources in the `$r('app.type.name')` format, which is `$r('app.media.Tomato')` in this example.
-
+   
    ```ts
    @Entry
    @Component
@@ -69,9 +70,11 @@ Before creating a page, create an ArkTS project. For details, see [Creating an A
      }
    }
    ```
-
+   
 4. Set the width and height of the image, and set the **objectFit** attribute of the image to **ImageFit.Contain**, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary.
+
    If the image fills the entire screen, the possible causes are as follows:
+
    1. The width and height of the image are not set.
 
    2. The default attribute of **objectFit** of the image is **ImageFit.Cover**, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked.
@@ -215,12 +218,13 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
    ```
 
 2. Create a **\<Flex>** component to display two food composition categories in the tomato: **Calories** and **Nutrition**.
+   
    **Calories** contains information about calories. **Nutrition** contains information about protein, fat, carbohydrates, and vitamin C.
-
+   
    Create the **Calories** class. Create a **\<Flex>** component and set its height to **280**, and the top, right, and left margins to **30**. The **Flex** component contains three **\<Text>** child components, which represent the category name (**Calories**), content name (**Calories**), and contain value (**17 kcal**), respectively. By default, child components in the **Flex** component are arranged horizontally.
-
+   
    In the following example, code of **FoodImageDisplay** is omitted, and only code of **ContentTable** is provided.
-
+   
    ```ts
    @Component
    struct ContentTable {
@@ -307,12 +311,13 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
      }
    }
    ```
-   
+
      ![en-us_image_0000001215079443](figures/en-us_image_0000001215079443.png)
-   
+
 4. Create the **Nutrient** class in a similar process. **Nutrition** consists of four parts: **Protein**, **Fat**, **Carbohydrates**, and **VitaminC**. The names of the last three parts are omitted in the table and represented by spaces.
+   
    Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**.
-
+   
    ```ts
    @Component
    struct ContentTable {
@@ -406,17 +411,18 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
        }
    }
    ```
-
+   
    ![en-us_image_0000001215199399](figures/en-us_image_0000001215199399.png)
    
 5. Use the custom constructor **\@Builder** to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure.
-   
+
    ![en-us_image_0000001169599582](figures/en-us_image_0000001169599582.png)
-   
+
+
 Currently, all food groups are declared, resulting in code duplication and redundancy. You can use **\@Builder** to build a custom method and abstract the same UI structure declaration. The **\@Builder** decorated method and the **build** method for the **@Component** decorated component are used to declare some UI rendering structures and comply with the same ArkTS syntax. You can define one or more methods decorated by **\@Builder**, but a component decorated by **@Component** can have only one **build** method.
-   
+
 Declare the **IngredientItem** method decorated by **\@Builder** in **ContentTable** to declare the UI descriptions for the category name, content name, and content value.
-   
+
    ```ts
     @Component
    struct ContentTable {
@@ -438,9 +444,9 @@ Declare the **IngredientItem** method decorated by **\@Builder** in **ContentTab
      }
    }
    ```
-   
+
 When the **IngredientItem** API is called in the **build** method of **ContentTable**, **this** needs to be used to invoke the method in the scope of the component to distinguish the global method call.
-   
+
    ```ts
    @Component
    struct ContentTable {
@@ -458,9 +464,9 @@ When the **IngredientItem** API is called in the **build** method of **ContentTa
      }
    }
    ```
-   
+
 The overall code of the **ContentTable** component is as follows:
-   
+
    ```ts
    @Component
    struct ContentTable {
@@ -506,7 +512,7 @@ The overall code of the **ContentTable** component is as follows:
        }
    }
    ```
-   
+
   ![en-us_image_0000001215199399](figures/en-us_image_0000001215199399.png)
 
 You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection.