diff --git a/en/application-dev/ui/ui-ts-creating-simple-page.md b/en/application-dev/ui/ui-ts-creating-simple-page.md index b33ed86346a2c88acace5e6992f75ac99afb9596..c3382498230de8e6aee8622970db3dc4375c46e5 100644 --- a/en/application-dev/ui/ui-ts-creating-simple-page.md +++ b/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 **\** and **\** as well as basic components **\** and **\**. -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 **\** component and specify a URL for it. To display the **\** component above the **\** component, declare the **\** 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 **\** 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 **\** 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 **\** component and set its height to **280**, and the top, right, and left margins to **30**. The **Flex** component contains three **\** 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.