Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“5be6b17a1b0416d93c676805917a0613e6498d9e”上不存在“...negotiator/git@gitcode.net:m0_66464164/NodeJS.git”
未验证 提交 7de70c3c 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10881 翻译完成 10334 

Merge pull request !10881 from ester.zhou/TR-10334
上级 12b7f430 0169e282
显示空白变更内容
内联 并排
Showing with 198 addition and 184 deletion
en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
浏览文件 @ 7de70c3c
...@@ -16,7 +16,7 @@ import lottie from '@ohos/lottieETS' ...@@ -16,7 +16,7 @@ import lottie from '@ohos/lottieETS'
> **NOTE** > **NOTE**
> >
> In the **Terminal** window, run the `npm install @ohos/lottieETS` command to download Lottie. > In the **Terminal** window, run the `npm install @ohos/lottieETS` command to download Lottie. The download requires the related permission.
> >
> To install an OpenHarmony npm third-party package, run the `npm config set @ohos:registry=https://repo.harmonyos.com/npm/` command to set the repository address. > To install an OpenHarmony npm third-party package, run the `npm config set @ohos:registry=https://repo.harmonyos.com/npm/` command to set the repository address.
...@@ -31,15 +31,15 @@ Loads an animation. Before calling this method, declare the **Animator('\__lotti ...@@ -31,15 +31,15 @@ Loads an animation. Before calling this method, declare the **Animator('\__lotti
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------------- | --------------------------- | ---- | ---------------------------------------- | | -------------- | --------------------------- | ---- | ---------------------------------------- |
| path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**| | path | string | Yes | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
| container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.| | container | object | Yes | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
| render | string | Yes | Rendering type. The value can only be **"canvas"**. | | render | string | Yes | Rendering type. The value can only be **"canvas"**. |
| loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.| | loop | boolean \| number | No | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.|
| autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. | | autoplay | boolean | No | Whether to automatically play the animation. The default value is **true**. |
| name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. | | name | string | No | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null. |
| initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. | | initialSegment | [number, number] | No | Start frame and end frame of the animation, respectively. |
## lottie.destroy ## lottie.destroy
...@@ -50,9 +50,9 @@ Destroys the animation. This method must be called when a page exits. This metho ...@@ -50,9 +50,9 @@ Destroys the animation. This method must be called when a page exits. This metho
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.| | name | string | Yes | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
**Example** **Example**
```ts ```ts
...@@ -131,9 +131,9 @@ Plays a specified animation. ...@@ -131,9 +131,9 @@ Plays a specified animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.| | name | string | Yes | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
**Example** **Example**
...@@ -150,9 +150,9 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani ...@@ -150,9 +150,9 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| | name | string | Yes | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example** **Example**
...@@ -169,9 +169,9 @@ Pauses or plays a specified animation. This method is equivalent to the switchin ...@@ -169,9 +169,9 @@ Pauses or plays a specified animation. This method is equivalent to the switchin
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example** **Example**
...@@ -188,9 +188,9 @@ Stops the specified animation. The next time **lottie.play()** is called, the an ...@@ -188,9 +188,9 @@ Stops the specified animation. The next time **lottie.play()** is called, the an
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | ---------------------------------------- | | ---- | ------ | ---- | ---------------------------------------- |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.| | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
**Example** **Example**
...@@ -207,10 +207,10 @@ Sets the playback speed of the specified animation. ...@@ -207,10 +207,10 @@ Sets the playback speed of the specified animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.| | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.| | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
**Example** **Example**
...@@ -227,10 +227,10 @@ Sets the direction in which the specified animation plays. ...@@ -227,10 +227,10 @@ Sets the direction in which the specified animation plays.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- | | --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 | | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
| name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.| | name | string | Yes | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
**Example** **Example**
...@@ -275,9 +275,9 @@ Plays an animation. ...@@ -275,9 +275,9 @@ Plays an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -294,9 +294,9 @@ Destroys an animation. ...@@ -294,9 +294,9 @@ Destroys an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -313,9 +313,9 @@ Pauses an animation. When the **play** interface is called next time, the animat ...@@ -313,9 +313,9 @@ Pauses an animation. When the **play** interface is called next time, the animat
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -332,9 +332,9 @@ Pauses or plays an animation. This method is equivalent to the switching between ...@@ -332,9 +332,9 @@ Pauses or plays an animation. This method is equivalent to the switching between
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -351,9 +351,9 @@ Stops an animation. When the **play** interface is called next time, the animati ...@@ -351,9 +351,9 @@ Stops an animation. When the **play** interface is called next time, the animati
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------- | | ---- | ------ | ---- | --------------- |
| name | string | No | Name of the target animation. By default, the value is null.| | name | string | No | Name of the target animation. By default, the value is null.|
**Example** **Example**
...@@ -370,9 +370,9 @@ Sets the playback speed of an animation. ...@@ -370,9 +370,9 @@ Sets the playback speed of an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ------ | ---- | ---------------------------------------- | | ----- | ------ | ---- | ---------------------------------------- |
| speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.| | speed | number | Yes | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
**Example** **Example**
...@@ -389,9 +389,9 @@ Sets the playback direction of an animation. ...@@ -389,9 +389,9 @@ Sets the playback direction of an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------------------ | ---- | ---------------------------------------- | | --------- | ------------------ | ---- | ---------------------------------------- |
| direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.| | direction | AnimationDirection | Yes | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
**Example** **Example**
...@@ -408,11 +408,11 @@ Sets the animation to stop at the specified frame or time. ...@@ -408,11 +408,11 @@ Sets the animation to stop at the specified frame or time.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- | | ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. | | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop. |
| isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.| | isFrame | boolean | No | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.|
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null. |
**Example** **Example**
...@@ -432,11 +432,11 @@ Sets the animation to start from the specified frame or time progress. ...@@ -432,11 +432,11 @@ Sets the animation to start from the specified frame or time progress.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------- | ------- | ---- | ---------------------------------------- | | ------- | ------- | ---- | ---------------------------------------- |
| value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. | | value | number | Yes | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start. |
| isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.| | isFrame | boolean | Yes | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.|
| name | string | No | Name of the target animation. By default, the value is null. | | name | string | No | Name of the target animation. By default, the value is null. |
**Example** **Example**
...@@ -456,10 +456,10 @@ Sets the animation to play only the specified segment. ...@@ -456,10 +456,10 @@ Sets the animation to play only the specified segment.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | ---------------------------------------- | | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
| segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.| | segments | AnimationSegment = [number, number] \| AnimationSegment[] | Yes | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. | | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed. |
**Example** **Example**
...@@ -479,9 +479,9 @@ Resets the settings configured by the **playSegments** method to play all the fr ...@@ -479,9 +479,9 @@ Resets the settings configured by the **playSegments** method to play all the fr
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ------- | ---- | ------------------------------ | | --------- | ------- | ---- | ------------------------------ |
| forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.| | forceFlag | boolean | Yes | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
**Example** **Example**
...@@ -511,9 +511,9 @@ Sets the precision of the **currentFrame** attribute to display floating-point n ...@@ -511,9 +511,9 @@ Sets the precision of the **currentFrame** attribute to display floating-point n
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------------ | ------- | ---- | ---------------------------------------- | | ------------ | ------- | ---- | ---------------------------------------- |
| useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.| | useSubFrames | boolean | Yes | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
**Example** **Example**
...@@ -530,9 +530,9 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for ...@@ -530,9 +530,9 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------- | ---- | ---------------------------------------- | | -------- | ------- | ---- | ---------------------------------------- |
| inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br>Default value: **false**| | inFrames | boolean | No | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br>Default value: **false**|
**Example** **Example**
...@@ -549,10 +549,10 @@ Adds an event listener. After the event is complete, the specified callback func ...@@ -549,10 +549,10 @@ Adds an event listener. After the event is complete, the specified callback func
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- | | -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| | name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. | | callback | AnimationEventCallback&lt;T&gt; | Yes | Custom callback. |
**Example** **Example**
...@@ -575,10 +575,10 @@ Removes an event listener. ...@@ -575,10 +575,10 @@ Removes an event listener.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ------------------------------- | ---- | ---------------------------------------- | | -------- | ------------------------------- | ---- | ---------------------------------------- |
| name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'| | name | AnimationEventName | Yes | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
| callback | AnimationEventCallback&lt;T&gt; | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. | | callback | AnimationEventCallback&lt;T&gt; | No | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed. |
**Example** **Example**
...@@ -595,10 +595,10 @@ Directly triggers all configured callbacks of a specified event. ...@@ -595,10 +595,10 @@ Directly triggers all configured callbacks of a specified event.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | ------------------ | ---- | --------- | | ---- | ------------------ | ---- | --------- |
| name | AnimationEventName | Yes | Animation event type. | | name | AnimationEventName | Yes | Animation event type. |
| args | any | Yes | Custom callback parameters.| | args | any | Yes | Custom callback parameters.|
**Example** **Example**
......
en/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @ 7de70c3c
# Creating a Simple Page # Creating a Simple Page
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>**. 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>**.
...@@ -21,14 +20,14 @@ In this section, we will develop an infographic food details page, by building c ...@@ -21,14 +20,14 @@ In this section, we will develop an infographic food details page, by building c
.fontWeight(500) .fontWeight(500)
} }
} }
} }
``` ```
![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png) ![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png)
2. Display food pictures. 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')"` 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. 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. Currently,` $rawfile` only allows the **\<Image>** component to reference image resources.
``` ```
@Entry @Entry
...@@ -45,17 +44,17 @@ In this section, we will develop an infographic food details page, by building c ...@@ -45,17 +44,17 @@ In this section, we will develop an infographic food details page, by building c
} }
``` ```
![en-us_image_0000001267887861](figures/en-us_image_0000001267887861.png)
3. Access images through resources. ![en-us_image_0000001267887861](figures/en-us_image_0000001267887861.png)
In addition to specifying the image path, you can also use the media resource symbol `$r` to reference resources in the **resources** folder based on the resource qualifier rules. Right-click the **resources** folder, choose **New** &gt; **Resource Directory**, and set **Resource Type** to **Media (image resource)**. 3. Access images through resources.
Place **Tomato.png** in the **media** folder. You can then can reference the application resource in the `$r('app.type.name')` format, that is, `$r('app.media.Tomato')`. 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.
``` ```
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
build() { build() {
...@@ -69,15 +68,18 @@ In this section, we will develop an infographic food details page, by building c ...@@ -69,15 +68,18 @@ 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. 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.
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.
``` If the image fills the entire screen, the possible causes are as follows:
@Entry
- The width and height of the image are not set.
- 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 @Component
struct MyComponent { struct MyComponent {
build() { build() {
...@@ -91,14 +93,17 @@ In this section, we will develop an infographic food details page, by building c ...@@ -91,14 +93,17 @@ 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 **alignContent** to **Alignment.BottomStart**. Similar to **FontWeight**, **Alignment** is a built-in enumeration type provided by the framework. 5. Set the food image and name layout.
Set **alignContent** of the **\<Stack>** component to **Alignment.BottomStart**. Similar to **FontWeight**, **Alignment** is a built-in enumeration type provided by the framework.
``` ```
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
build() { build() {
...@@ -114,15 +119,19 @@ In this section, we will develop an infographic food details page, by building c ...@@ -114,15 +119,19 @@ In this section, we will develop an infographic food details page, by building c
} }
``` ```
![en-us_image_0000001267647873](figures/en-us_image_0000001267647873.png) ![en-us_image_0000001267647873](figures/en-us_image_0000001267647873.png)
6. You can change the background color of the food image by setting the background color of the **\<Stack>** component in either of the following ways: 6. You can change the background color of the food image by setting the background color of the **\<Stack>** component in any of the following ways:
1. Using the built-in **Color** enums provided by the framework. For example, **backgroundColor(Color.Red)** indicates that the background color is set to red. 1. Using a 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. Using the string-type parameter. 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)??)**. 2. Using a value of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue through **backgroundColor(??#0000FF??)** and set the background color to white through **backgroundColor(??rgb(255, 255, 255)??)**.
3. Using a value of the number type. Hexadecimal color values are supported. For example, **backgroundColor(0xFF0000)** indicates that the background color is red.
4. Using a value of the Resource type. For details about the Resource type, see [Resource Access](ts-resource-access.md).
```
@Entry ```
@Entry
@Component @Component
struct MyComponent { struct MyComponent {
build() { build() {
...@@ -136,18 +145,19 @@ In this section, we will develop an infographic food details page, by building c ...@@ -136,18 +145,19 @@ In this section, we will develop an infographic food details page, by building c
} }
.backgroundColor('#FFedf2f5') .backgroundColor('#FFedf2f5')
} }
} }
``` ```
![en-us_image_0000001222967772](figures/en-us_image_0000001222967772.png) ![en-us_image_0000001222967772](figures/en-us_image_0000001222967772.png)
7. Adjust the left and bottom margin of the **\<Text>** component. **Margin** is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows: 7. Adjust the left and bottom margin of the **\<Text>** component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately.
1. To set the margins of the four edges in a unified manner, use the **Margin(Length)** format. For example, **margin(20)** indicates that the outer margins of the top, right, bottom, and left edges are all 20. - To set the margins of the four edges in a unified manner, use the **Margin(Length)** format. For example, **margin(20)** indicates that the margins of the top, right, bottom, and left edges are all 20.
2. To set the margins of the four edges separately, use the **{top?: Length, right?: Length, bottom?: Length, left?:Length}** format. For example, **margin({ left: 26, bottom: 17.4 })** indicates that the left margin is 26 and the bottom margin is 17.4.
- To set the margins of the four edges separately, use the **{top?: Length, right?: Length, bottom?: Length, left?:Length}** format. For example, **margin({ left: 26, bottom: 17.4 })** indicates that the left margin is 26 and the bottom margin is 17.4.
``` ```
@Entry @Entry
@Component @Component
struct MyComponent { struct MyComponent {
build() { build() {
...@@ -163,17 +173,17 @@ In this section, we will develop an infographic food details page, by building c ...@@ -163,17 +173,17 @@ In this section, we will develop an infographic food details page, by building c
.backgroundColor('#FFedf2f5') .backgroundColor('#FFedf2f5')
} }
} }
``` ```
![en-us_image_0000001222967776](figures/en-us_image_0000001222967776.png)
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. ![en-us_image_0000001222967776](figures/en-us_image_0000001222967776.png)
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. 8. Adjust the structure between components and semanticize component names. Create the **FoodDetail** page entry component, create a **\<Column>** component 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.
The **\<Column>** component is a container whose child components are vertically arranged. It is in linear layout in essence. Therefore, only the alignment in the cross axis direction can be set.
``` ```
@Component @Component
struct FoodImageDisplay { struct FoodImageDisplay {
build() { build() {
Stack({ alignContent: Alignment.BottomStart }) { Stack({ alignContent: Alignment.BottomStart }) {
...@@ -199,17 +209,18 @@ In this section, we will develop an infographic food details page, by building c ...@@ -199,17 +209,18 @@ In this section, we will develop an infographic food details page, by building c
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
``` ```
## Building the Flex Layout ## Building the Flex Layout
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. Use the **Flex** layout to build a food composition table. In this way, cell sizes are flexibly set based on the proportion, eliminating the need for width and height calculation.
1. Create a **ContentTable** component as a child component of the **FoodDetail** component. 1. Create a **ContentTable** component as a child component of the **FoodDetail** component.
``` ```
@Component @Component
struct FoodImageDisplay { struct FoodImageDisplay {
build() { build() {
Stack({ alignContent: Alignment.BottomStart }) { Stack({ alignContent: Alignment.BottomStart }) {
...@@ -241,19 +252,19 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -241,19 +252,19 @@ You can use the Flex layout to build a food composition table. In this way you d
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
``` ```
2. Create a Flex component to display two food composition categories in the tomato: **Calories** and **Nutrition**. 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. **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. 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. In the following example, code of **FoodImageDisplay** is omitted, and only code of **ContentTable** is provided.
```
``` @Component
@Component
struct ContentTable { struct ContentTable {
build() { build() {
Flex() { Flex() {
...@@ -281,14 +292,15 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -281,14 +292,15 @@ You can use the Flex layout to build a food composition table. In this way you d
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
``` ```
![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png) ![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png)
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)**. 3. Adjust the layout and set the proportion (**layoutWeight**) of each part. Set **layoutWeight** of the category name to **1**, and **layoutWeight** of the 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 @Component
struct FoodImageDisplay { struct FoodImageDisplay {
build() { build() {
Stack({ alignContent: Alignment.BottomStart }) { Stack({ alignContent: Alignment.BottomStart }) {
...@@ -337,7 +349,8 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -337,7 +349,8 @@ You can use the Flex layout to build a food composition table. In this way you d
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
``` ```
![en-us_image_0000001267607901](figures/en-us_image_0000001267607901.png) ![en-us_image_0000001267607901](figures/en-us_image_0000001267607901.png)
...@@ -345,9 +358,8 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -345,9 +358,8 @@ You can use the Flex layout to build a food composition table. In this way you d
Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**. Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**.
```
``` @Component
@Component
struct ContentTable { struct ContentTable {
build() { build() {
Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
...@@ -438,18 +450,18 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -438,18 +450,18 @@ You can use the Flex layout to build a food composition table. In this way you d
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
``` ```
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_0000001223287704](figures/en-us_image_0000001223287704.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.
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 eTS syntax. You can define one or more methods decorated by @Builder, but a component decorated by @Component can have only one build method. ![en-us_image_0000001223287704](figures/en-us_image_0000001223287704.png)
Declare the **IngredientItem** method decorated by @Builder in **ContentTable** to declare the UI descriptions for the category name, content name, and content value. 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.
``` ```
@Component @Component
struct ContentTable { struct ContentTable {
@Builder IngredientItem(title:string, name: string, value: string) { @Builder IngredientItem(title:string, name: string, value: string) {
...@@ -469,13 +481,13 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -469,13 +481,13 @@ 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.
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 @Component
struct ContentTable { struct ContentTable {
...... ......
build() { build() {
...@@ -490,13 +502,13 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -490,13 +502,13 @@ You can use the Flex layout to build a food composition table. In this way you d
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
``` ```
The overall code of the **ContentTable** component is as follows:
The overall code of the **ContentTable** component is as follows:
``` ```
@Component @Component
struct ContentTable { struct ContentTable {
@Builder IngredientItem(title:string, name: string, value: string) { @Builder IngredientItem(title:string, name: string, value: string) {
Flex() { Flex() {
...@@ -526,6 +538,7 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -526,6 +538,7 @@ You can use the Flex layout to build a food composition table. In this way you d
.height(280) .height(280)
.padding({ top: 30, right: 30, left: 30 }) .padding({ top: 30, right: 30, left: 30 })
} }
} }
@Entry @Entry
...@@ -539,8 +552,9 @@ You can use the Flex layout to build a food composition table. In this way you d ...@@ -539,8 +552,9 @@ You can use the Flex layout to build a food composition table. In this way you d
.alignItems(HorizontalAlign.Center) .alignItems(HorizontalAlign.Center)
} }
} }
``` ```
![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png) ![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png)
You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection. You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection.
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或