!15255 【Monthly】翻译完成 14824：update zh-cn/application-dev/ui/ui-ts-creating-simple-page.md

Merge pull request !15255 from ester.zhou/cherry-pick-1677465029

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,6 +28,7 @@ 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
@@ -45,10 +46,10 @@ 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.
@@ -71,7 +72,9 @@ 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,6 +218,7 @@ 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.
@@ -311,6 +315,7 @@ 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
@@ -413,6 +418,7 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz
 
    ![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.