未验证 提交 00da507f 编写于 作者: O openharmony_ci 提交者: Gitee

!2842 2673 处理完成:ui-ts-creating-simple-page.md 刷新

Merge pull request !2842 from ester.zhou/TR-2673
......@@ -26,7 +26,7 @@ In this section, we will develop an infographic food details page, by building c
![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png)
2. Display food pictures.
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
......@@ -54,7 +54,7 @@ In this section, we will develop an infographic food details page, by building c
![en-us_image_0000001222807784](figures/en-us_image_0000001222807784.png)
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').
```
......@@ -76,9 +76,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.
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.
```
......@@ -96,9 +97,9 @@ In this section, we will develop an infographic food details page, by building c
}
}
}
```
```
![en-us_image_0000001223127732](figures/en-us_image_0000001223127732.png)
![en-us_image_0000001223127732](figures/en-us_image_0000001223127732.png)
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.
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册