@@ -8,7 +8,7 @@ In this section, we will develop an infographic food details page, by building c
1. Create a food name.
Delete the code of the build method in the project template, create a <Stack> component, and place the <Text> component in the braces of the <Stack> component so that the <Text> component becomes a child component of the <Stack> component. A <Stack> component consists of one or more child components. The latter child component overwrites the former one.
```
@Entry
@Component
...
...
@@ -26,8 +26,8 @@ In this section, we will develop an infographic food details page, by building c
Create an <Image> component and specify a URL for it. The <Image> and <Text> components are mandatory. To display the <Text> component above the <Image> component, you need to 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_ loaded) format, where filename indicates the relative path of the file in the rawfile folder. Currently, $rawfile only allows the <Image> component to reference image resources.
Create an <Image> component and specify a URL for it. The <Image> and <Text> components are mandatory. To display the <Text> component above the <Image> component, you need to 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. Currently, `$rawfile` only allows the <Image> component to reference image resources.
```
@Entry
@Component
...
...
@@ -54,9 +54,9 @@ In this section, we will develop an infographic food details page, by building c
You can then can reference the application resource in the $r('app.type.name') format, that is, $r('app.media.Tomato').
You can then can reference the application resource in the ` "$r('app.type.name')"` format, that is, `$r('app.media.Tomato')`.
```
@Entry
@Component
...
...
@@ -74,13 +74,10 @@ In this section, we will develop an infographic food details page, by building c
}
```
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.
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.
```
@Entry
@Component
...
...
@@ -98,11 +95,11 @@ In this section, we will develop an infographic food details page, by building c
5. Set the food image and name layout. Set the alignment mode of the stack to bottom alignment. By default, the stack is center aligned. Set alignContent to Alignment.BottomStart. Similar to FontWeight, Alignment is a built-in enumeration type provided by the framework.
```
```
@Entry
@Component
struct MyComponent {
...
...
@@ -117,7 +114,7 @@ In this section, we will develop an infographic food details page, by building c
@@ -125,7 +122,7 @@ In this section, we will develop an infographic food details page, by building c
1. By using the built-in enumeration value of Color provided by the framework. For example, backgroundColor(Color.Red) indicates that the background color is set to red.
2. By using the parameter of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue by setting backgroundColor(??\#0000FF??) and set the background color to white by setting backgroundColor(??rgb(255, 255, 255)??).
```
@Entry
@Component
...
...
@@ -150,7 +147,7 @@ In this section, we will develop an infographic food details page, by building c
1. When the parameter is set to Length, the outer margins of the four edges are specified. For example, margin(20) indicates that the outer margins of the top, right, bottom, and left edges are all 20.
2. {top?: Length, right?: Length, bottom?: Length, left?:Length} specifies the margins of the four edges. For example, margin({ left: 26, bottom: 17.4 }) indicates that the left margin is 26 and the bottom margin is 17.4.
```
@Entry
@Component
...
...
@@ -175,7 +172,7 @@ In this section, we will develop an infographic food details page, by building c
8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column in FoodDetail, and set the alignment to alignItems(HorizontalAlign.Center). Change the name of the MyComponent component to FoodImageDisplay, which is a child component of the FoodDetail component.
A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set.
```
@Component
struct FoodImageDisplay {
...
...
@@ -192,7 +189,7 @@ In this section, we will develop an infographic food details page, by building c
.backgroundColor('#FFedf2f5')
}
}
@Entry
@Component
struct FoodDetail {
...
...
@@ -211,7 +208,7 @@ In this section, we will develop an infographic food details page, by building c
You can use the Flex layout to build a food composition table. In this way you do not need to worry about the width and height calculation. The size of different cells can be flexibly set based on the proportion.
1. Create a ContentTable component as a child component of the FoodDetail component.
```
@Component
struct FoodImageDisplay {
...
...
@@ -228,12 +225,12 @@ You can use the Flex layout to build a food composition table. In this way you d
.backgroundColor('#FFedf2f5')
}
}
@Component
struct ContentTable {
build() {}
}
@Entry
@Component
struct FoodDetail {
...
...
@@ -254,7 +251,7 @@ You can use the Flex layout to build a food composition table. In this way you d
In the following example, code of FoodImageDisplay is omitted, and only code of ContentTable is provided.
```
@Component
struct ContentTable {
...
...
@@ -272,7 +269,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.padding({ top: 30, right: 30, left: 30 })
}
}
@Entry
@Component
struct FoodDetail {
...
...
@@ -289,7 +286,7 @@ You can use the Flex layout to build a food composition table. In this way you d
3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to 1, and the total proportion of content name and content value to 2. The content name and content value are in a same Flex, and the content name occupies all remaining space flexGrow(1).
```
@Component
struct FoodImageDisplay {
...
...
@@ -306,7 +303,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.backgroundColor('#FFedf2f5')
}
}
@Component
struct ContentTable {
build() {
...
...
@@ -328,7 +325,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.padding({ top: 30, right: 30, left: 30 })
}
}
@Entry
@Component
struct FoodDetail {
...
...
@@ -347,7 +344,7 @@ You can use the Flex layout to build a food composition table. In this way you d
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.
```
@Component
struct ContentTable {
...
...
@@ -428,7 +425,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.padding({ top: 30, right: 30, left: 30 })
}
}
@Entry
@Component
struct FoodDetail {
...
...
@@ -449,7 +446,7 @@ You can use the Flex layout to build a food composition table. In this way you d
Declare the IngredientItem method decorated by @Builder in ContentTable to declare the UI descriptions for the category name, content name, and content value.
```
@Component
struct ContentTable {
...
...
@@ -477,7 +474,7 @@ You can use the Flex layout to build a food composition table. In this way you d
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.
```
@Component
struct ContentTable {
...
...
@@ -498,7 +495,7 @@ You can use the Flex layout to build a food composition table. In this way you d
The overall code of the ContentTable component is as follows:
```
@Component
struct ContentTable {
...
...
@@ -518,7 +515,7 @@ You can use the Flex layout to build a food composition table. In this way you d
