diff --git a/en/application-dev/quick-start/arkts-rendering-control.md b/en/application-dev/quick-start/arkts-rendering-control.md index d0ff5a8c183d8efba03b12f7343f001a3ba31fe5..0cb38c2c123171b7ebe05df263b7275445542986 100644 --- a/en/application-dev/quick-start/arkts-rendering-control.md +++ b/en/application-dev/quick-start/arkts-rendering-control.md @@ -263,11 +263,11 @@ struct MyComponent { > > - **LazyForEach** must be used in the container component. Currently, only the **\**, **\**, and **\** components support lazy loading (that is, only the visible part and a small amount of data before and after the visible part are loaded for caching). For other components, all data is loaded at a time. > -> - **LazyForEach** must create and only one child component in each iteration. +> - **LazyForEach** must create one and only one child component in each iteration. > -> - The generated child components must be allowed in the parent container component of **LazyForEach**. +> - The generated child components must be the ones allowed in the parent container component of **LazyForEach**. > -> - **LazyForEach** can be included in an **if/else** statement, but cannot contain such a statement. +> - **LazyForEach** can be included in an **if/else** statement. > > - For the purpose of high-performance rendering, when the **onDataChange** method of the **DataChangeListener** object is used to update the UI, the component update is triggered only when the state variable is used in the child component created by **itemGenerator**. > diff --git a/en/application-dev/reference/apis/js-apis-curve.md b/en/application-dev/reference/apis/js-apis-curve.md index 2c90472a98a38d74e7211eb8dcef2061082f18c8..f06e40489cbe25cd8fc75171d3736e0f868cbd69 100644 --- a/en/application-dev/reference/apis/js-apis-curve.md +++ b/en/application-dev/reference/apis/js-apis-curve.md @@ -1,4 +1,4 @@ -# @ohos.curves +# @ohos.curves (Interpolation Calculation) The **Curves** module provides APIs for interpolation calculation to create step, cubic Bezier, and spring curves. @@ -309,7 +309,6 @@ Creates a spring curve. This API is deprecated since API version 9. You are advi ```ts // xxx.ets import Curves from '@ohos.curves' - @Entry @Component struct ImageComponent { @@ -319,16 +318,16 @@ struct ImageComponent { build() { Column() { Text() - .margin({ top: 100 }) + .margin({top:100}) .width(this.widthSize) .height(this.heightSize) .backgroundColor(Color.Red) - .onClick(() => { + .onClick(()=> { let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0); this.widthSize = curve.interpolate(0.5) * this.widthSize; this.heightSize = curve.interpolate(0.5) * this.heightSize; }) - .animation({ duration: 2000, curve: Curves.stepsCurve(9, true) }) + .animation({ duration: 2000 , curve: Curves.stepsCurve(9, true) }) }.width("100%").height("100%") } } diff --git a/en/application-dev/reference/arkui-ts/figures/animateTo.gif b/en/application-dev/reference/arkui-ts/figures/animateTo.gif deleted file mode 100644 index 8755e2bc014f3843f8798acae725eeb0fee11f54..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/animateTo.gif and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/animationComponent1.png b/en/application-dev/reference/arkui-ts/figures/animationComponent1.png new file mode 100644 index 0000000000000000000000000000000000000000..b2aa53b14b112434bb736d2dc2f301bac3b46043 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animationComponent1.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/animationComponent2.png b/en/application-dev/reference/arkui-ts/figures/animationComponent2.png new file mode 100644 index 0000000000000000000000000000000000000000..c348c9305503698fab2f6b401450048a653e581a Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animationComponent2.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/animationComponent3.png b/en/application-dev/reference/arkui-ts/figures/animationComponent3.png new file mode 100644 index 0000000000000000000000000000000000000000..b53d8f308a879d4b4ce84db7adac1289c8b85cfa Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animationComponent3.png differ diff --git a/en/application-dev/reference/arkui-ts/figures/animationComponent4.png b/en/application-dev/reference/arkui-ts/figures/animationComponent4.png new file mode 100644 index 0000000000000000000000000000000000000000..a93f8390861d3638a35de13f38e2ab51816b8083 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/animationComponent4.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md index 9de0b8a25a4bf88c91c0883561cc9ff61b63c086..dadb0c4d47d81c8708e1a45ef454f9b350c6564d 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -1,6 +1,6 @@ # ListItem -The **\** component displays specific items in the list. Its width occupies the **\** component by default and must be used together with **\**. +The **\** component displays specific items in the list. It must be used together with **\**. > **NOTE** > @@ -22,8 +22,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| sticky(deprecated) | [Sticky](#stickydeprecated) | Sticky effect of the list item.
Default value: **Sticky.None**
This API is deprecated since API version 9. You are advised to use **sticky** of the [\](ts-container-list.md#attributes) component. | -| editable(deprecated) | boolean \| [EditMode](#editmodedeprecated) | Whether to enter editing mode, where the list item can be deleted or moved.
This API is deprecated since API version 9.
Default value: **false**| +| sticky(deprecated) | [Sticky](#stickydeprecated) | Sticky effect of the list item.
Default value: **Sticky.None**
This API is deprecated since API version 9. You are advised to use **sticky** of the [\](ts-container-list.md#attributes) component.| +| editable | boolean \| [EditMode](#editmode) | Whether to enter editing mode, where the list item can be deleted or moved.
Default value: **false** | | selectable8+ | boolean | Whether the current list item is selectable by mouse drag.
**NOTE**
This attribute takes effect only when mouse frame selection is enabled for the parent **\** container.
Default value: **true**| | swipeAction9+ | {
start?: CustomBuilder,
end?:CustomBuilder,
edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),
} | Component displayed when the list item is swiped out from the screen edge.
- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).
- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).
- **edgeEffect**: scroll effect.
| @@ -35,8 +35,8 @@ This API is deprecated since API version 9. You are advised to use [stickyStyle] | Normal | The list item is sticky with no special effects.| | Opacity | The list item is sticky with opacity changes.| -## EditMode(deprecated) -This API is deprecated since API version 9. +## EditMode + | Name | Description | | ------ | --------- | | None | The editing operation is not restricted. | diff --git a/en/application-dev/reference/arkui-ts/ts-container-scroll.md b/en/application-dev/reference/arkui-ts/ts-container-scroll.md index 90d17f70d4fc01ef8e80d9f13069e6d08b5d02fd..a0efd8457d392485781624d95fef53017706964a 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/en/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -131,7 +131,7 @@ Scrolls to the item with the specified index. > **NOTE** > -> Only the **\** component is supported. +> Only the **\**, **\**, and **\** components are supported. **Parameters** diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md index 7e38b90f2497876d12af34b965cc34ed4e71af21..7c62710b64759d42e205eb91b010fb50e478e108 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md @@ -50,7 +50,7 @@ struct TransitionExample { }) }) if (this.flag) { - // Apply different transition effects to the appearance and disappearance of the image. + // Apply different transition effects to the showing and hiding of the image. Image($r('app.media.testImg')).width(300).height(300) .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } }) .transition({ type: TransitionType.Delete, rotate: { angle: 180 } }) @@ -60,4 +60,20 @@ struct TransitionExample { } ``` -![animateTo](figures/animateTo.gif) +Diagrams: + +When the image is completely displayed: + +![animationComponent1](figures/animationComponent1.png) + +When the transition effect of 180° clockwise rotation is applied to the hiding of the image: + +![animationComponent3](figures/animationComponent3.png) + +When the image disappears completely: + +![animationComponent2](figures/animationComponent2.png) + +When the transition effect of zooming in twice horizontally is applied to the image displayed: + +![animationComponent4](figures/animationComponent4.png) diff --git a/en/application-dev/ui/ui-ts-building-data-model.md b/en/application-dev/ui/ui-ts-building-data-model.md index bb3454cc6299d4910445caaae2e14f7478591425..c520596252a9652ce8ad9e00e21a0e33a93e2ba3 100644 --- a/en/application-dev/ui/ui-ts-building-data-model.md +++ b/en/application-dev/ui/ui-ts-building-data-model.md @@ -1,21 +1,19 @@ # Building a Food Data Model - -On the created page, we use various items to describe food, such as food names, calories, proteins, fats, carbohydrates, and vitamin C. This form of coding is impractical in actual development. Therefore, you need to create food data models to store and manage data in a unified manner. +In real-world development, it is impractical to describe all aspects of food in code, including the food name and nutrition facts. This is where the food data model comes into the picture. With the food data model, you can store and manage data in a unified manner. ![en-us_image_0000001267767897](figures/en-us_image_0000001267767897.png) -1. Create a folder named model and create a file named FoodData.ets therein. - -![en-us_image_0000001223127760](figures/en-us_image_0000001223127760.png) - -2. Define a food data storage model, FoodData, and an enum variable, Category. The FoodData class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes. - The ArkTS programming language is an extension of the TS language and also supports the TS syntax. +1. Create a folder named **model** and create a file named **FoodData.ets** therein. + ![en-us_image_0000001223127760](figures/en-us_image_0000001223127760.png) - ``` +2. Define a food data storage model, **FoodData**, and an enum variable, **Category**. The **FoodData** class contains **id**, **name**, **category**, **image**, **calories**, **protein**, **fat**, **carbohydrates**, and **vitaminC** attributes. + The ArkTS programming language is an extension of the TS language and also supports the TS syntax. + + ```ts enum Category { Fruit, Vegetable, @@ -50,14 +48,21 @@ On the created page, we use various items to describe food, such as food names, } ``` -3. Store food image resources in the resources > base > media directory. Use food names as the image names. - -4. Create food resource data. Create FoodDataModels.ets in the model folder and declare a food composition array, FoodComposition on the page. - In this example, you can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved. +3. Store food images in the **resources** > **base** > **media** directory. Use food names as the image names. -5. Create the initializeOnStartUp method to initialize the FoodData array. Export the FoodData class from FoodData.ets, and import FoodData and Category in FoodDataModels.ets. +4. Create food resource data. Create **FoodDataModels.ets** in the **model** folder and declare the food composition array **FoodComposition** on the page. The following example creates two pieces of food data. + ```ts + const FoodComposition: any[] = [ + { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 }, + { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 } + ] ``` + + In real-world development, you can customize more data resources when needed. Use [Lazy Loading](../quick-start/arkts-rendering-control.md#lazy-loading) to load data if a large amount of food data is involved. + +5. Create the **initializeOnStartUp** method to initialize the **FoodData** array. Export the **FoodData** class from **FoodData.ets**, and import **FoodData** and **Category** in **FoodDataModels.ets**. + ```ts // FoodData.ets export enum Category { ...... diff --git a/en/application-dev/ui/ui-ts-layout-grid-container-new.md b/en/application-dev/ui/ui-ts-layout-grid-container-new.md index 8afee0cc3d48894ff646a4251c38227daef3c0fb..f51288b2a77901abf6620a6bcc8f0499fb647289 100644 --- a/en/application-dev/ui/ui-ts-layout-grid-container-new.md +++ b/en/application-dev/ui/ui-ts-layout-grid-container-new.md @@ -27,12 +27,12 @@ After you set the breakpoints, the layout listens for changes in the application The grid system defines breakpoints, which are screen width types in effect, based on the horizontal width (screen density pixels, in vp) of the screens. You can use the breakpoints to meet specific layout requirements. By default, the grid system provides four breakpoints: xs, sm, md, and lg. -| Breakpoint | Value Range (vp)| -| --------| ------ | -| xs | [0, 320) | -| sm | [320, 520) | -| md | [520, 840) | -| lg | [840, +∞) | +| Breakpoint | Value Range (vp)| +| --------| ------ | +| xs | [0, 320) | +| sm | [320, 520) | +| md | [520, 840) | +| lg | [840, +∞) | In the **\** component, you can use **breakpoints** to customize the value range of breakpoints. A maximum of six breakpoints are supported. In addition to the four default breakpoints, you can also enable the xl and xxl breakpoints for your application window layout. @@ -83,15 +83,15 @@ GridRow({ } }) { Row() { - Text(${index}) + Text(`${index}`) }.width("100%").height("50vp") }.backgroundColor(color) }) } -``` + ``` ![](figures/breakpoints.gif) - + ### Columns @@ -173,7 +173,7 @@ In the **\**, **columns** is used to set the total number of columns in ``` ![](figures/columns3.gif) - As shown above, if **columns** is only set for the sm and md screen size types, screen sizes smaller than sm use the default value 12, and screen sizes larger than md (lg, xl, and xxl) use the value of **columns** of the md type. + As shown above, if **columns** is only set for the sm and md screen size types, screen sizes smaller than sm use the default value **12**, and screen sizes larger than md (lg, xl, and xxl) use the value of **columns** of the md type. ### Gutters @@ -264,7 +264,7 @@ Sets the number of columns occupied by a child component in the grid layout, whi ForEach(this.bgColors, (color, index) => { GridCol({ span: 2 }) { Row() { - Text(${index}) + Text(`${index}`) }.width("100%").height("50vp") } .backgroundColor(color) @@ -281,7 +281,7 @@ Sets the number of columns occupied by a child component in the grid layout, whi ForEach(this.bgColors, (color, index) => { GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { Row() { - Text(${index}) + Text(`${index}`) }.width("100%").height("50vp") } .backgroundColor(color) @@ -333,8 +333,8 @@ Sets the column offset of a child component relative to the previous child compo ### order - Sets the sequence number of a child component in the grid layout. If a child component shares an **order** value with another child component or does not have **order** set, it is displayed based on its code sequence number. A child components with a larger **order** value is placed before the one with a smaller **order** value. - If **order** is not set for all child components, those that have **order** set are displayed after those that do not have **order** set and are sorted in descending order based on the value. +Sets the sequence number of a child component in the grid layout. If a child component shares an **order** value with another child component or does not have **order** set, it is displayed based on its code sequence number. A child components with a smaller **order** value is placed before the one with a larger **order** value. +If **order** is not set for all child components, those that have **order** set are displayed after those that do not have **order** set and are sorted in ascending order based on the value. - When the value type is number, child components are sorted in the same order across screen sizes.