Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
You need to sign in or sign up before continuing.
未验证 提交 3da68e65 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!13368 翻译完成 12916+12705+13113+12976+13105 

Merge pull request !13368 from ester.zhou/C2-0109
上级 c16563aa b5b31353
显示空白变更内容
内联 并排
Showing with 1022 addition and 346 deletion
en/application-dev/quick-start/arkts-rendering-control.md
浏览文件 @ 3da68e65
...@@ -34,7 +34,7 @@ Column() { ...@@ -34,7 +34,7 @@ Column() {
You can use **ForEach** to obtain data from arrays and create components for each data item. You can use **ForEach** to obtain data from arrays and create components for each data item.
``` ```ts
ForEach( ForEach(
arr: any[], arr: any[],
itemGenerator: (item: any, index?: number) => void, itemGenerator: (item: any, index?: number) => void,
...@@ -275,7 +275,7 @@ struct MyComponent { ...@@ -275,7 +275,7 @@ struct MyComponent {
> >
> ```ts > ```ts
> LazyForEach(dataSource, > LazyForEach(dataSource,
> item => Text(`${item.i}. item.data.label`)), > item => Text(`${item.i}. item.data.label`),
> item => item.data.id.toString()) > item => item.data.id.toString())
> ``` > ```
......
en/application-dev/reference/arkui-js/js-components-common-customizing-font.md
浏览文件 @ 3da68e65
...@@ -11,8 +11,8 @@ The custom font can be loaded from the font file in a project. The font file mus ...@@ -11,8 +11,8 @@ The custom font can be loaded from the font file in a project. The font file mus
``` ```
@font-face { @font-face {
font-family: HWfont; font-family: font;
src: url('/common/HWfont.ttf'); src: url('/common/font.ttf');
} }
``` ```
...@@ -48,10 +48,10 @@ Page style: ...@@ -48,10 +48,10 @@ Page style:
```css ```css
/*xxx.css*/ /*xxx.css*/
@font-face { @font-face {
font-family: HWfont; font-family: font;
src: url("/common/HWfont.ttf"); src: url("/common/font.ttf");
} }
.demo-text { .demo-text {
font-family: HWfont; font-family: font;
} }
``` ```
en/application-dev/reference/arkui-ts/Readme-EN.md
浏览文件 @ 3da68e65
# ArkTS-based Declarative Development Paradigm # ArkTS-based Declarative Development Paradigm
- [Component Overview](ts-components-summary.md)
- Universal Component Information - Universal Component Information
- Universal Events - Universal Events
- [Click Event](ts-universal-events-click.md) - [Click Event](ts-universal-events-click.md)
...@@ -65,6 +66,8 @@ ...@@ -65,6 +66,8 @@
- [LoadingProgress](ts-basic-components-loadingprogress.md) - [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Marquee](ts-basic-components-marquee.md) - [Marquee](ts-basic-components-marquee.md)
- [Navigation](ts-basic-components-navigation.md) - [Navigation](ts-basic-components-navigation.md)
- [NavRouter](ts-basic-components-navrouter.md)
- [NavDestination](ts-basic-components-navdestination.md)
- [PatternLock](ts-basic-components-patternlock.md) - [PatternLock](ts-basic-components-patternlock.md)
- [PluginComponent](ts-basic-components-plugincomponent.md) - [PluginComponent](ts-basic-components-plugincomponent.md)
- [Progress](ts-basic-components-progress.md) - [Progress](ts-basic-components-progress.md)
...@@ -98,7 +101,7 @@ ...@@ -98,7 +101,7 @@
- [ColumnSplit](ts-container-columnsplit.md) - [ColumnSplit](ts-container-columnsplit.md)
- [Counter](ts-container-counter.md) - [Counter](ts-container-counter.md)
- [Flex](ts-container-flex.md) - [Flex](ts-container-flex.md)
- [GridContainer](ts-container-gridcontainer.md) - [FlowItem](ts-container-flowitem.md)
- [GridCol](ts-container-gridcol.md) - [GridCol](ts-container-gridcol.md)
- [GridRow](ts-container-gridrow.md) - [GridRow](ts-container-gridrow.md)
- [Grid](ts-container-grid.md) - [Grid](ts-container-grid.md)
...@@ -118,8 +121,8 @@ ...@@ -118,8 +121,8 @@
- [Swiper](ts-container-swiper.md) - [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md) - [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md) - [TabContent](ts-container-tabcontent.md)
- [WaterFlow](ts-container-waterflow.md)
- Media Components - Media Components
- [Video](ts-media-components-video.md) - [Video](ts-media-components-video.md)
- Drawing Components - Drawing Components
- [Circle](ts-drawing-components-circle.md) - [Circle](ts-drawing-components-circle.md)
...@@ -139,16 +142,14 @@ ...@@ -139,16 +142,14 @@
- [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- [Path2D](ts-components-canvas-path2d.md) - [Path2D](ts-components-canvas-path2d.md)
- [Lottie](ts-components-canvas-lottie.md) - [Lottie](ts-components-canvas-lottie.md)
- Animation - Animation
- [AnimatorProperty](ts-animatorproperty.md) - [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animation](ts-explicit-animation.md) - [Explicit Animatio](ts-explicit-animation.md)
- Transition Animation - Transition Animation
- [Page Transition](ts-page-transition-animation.md) - [Page Transition](ts-page-transition-animation.md)
- [Component Transition](ts-transition-animation-component.md) - [Component Transition](ts-transition-animation-component.md)
- [Transition of Shared Elements](ts-transition-animation-shared-elements.md) - [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
- [Motion Path Animation](ts-motion-path-animation.md) - [Motion Path Animation](ts-motion-path-animation.md)
- Global UI Methods - Global UI Methods
- Pop-up Window - Pop-up Window
- [Alert Dialog Box](ts-methods-alert-dialog-box.md) - [Alert Dialog Box](ts-methods-alert-dialog-box.md)
...@@ -158,5 +159,9 @@ ...@@ -158,5 +159,9 @@
- [Time Picker Dialog Box](ts-methods-timepicker-dialog.md) - [Time Picker Dialog Box](ts-methods-timepicker-dialog.md)
- [Text Picker Dialog Box](ts-methods-textpicker-dialog.md) - [Text Picker Dialog Box](ts-methods-textpicker-dialog.md)
- [Menu](ts-methods-menu.md) - [Menu](ts-methods-menu.md)
- [Built-in Enums](ts-appendix-enums.md) - [State Management with Application-level Variables](ts-state-management.md)
- [Pixel Units](ts-pixel-units.md)
- [Enums](ts-appendix-enums.md)
- [Types](ts-types.md) - [Types](ts-types.md)
- Components No Longer Maintained
- [GridContainer](ts-container-gridcontainer.md)
en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md 0 → 100644
浏览文件 @ 3da68e65
# NavDestination
**\<NavDestination>** is a child component of the **\<NavRouter>** component and represents a destination in the navigation area.
> **NOTE**
>
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
Supported
## APIs
NavDestination()
## Attributes
In addition to the [backgroundColor](ts-universal-attributes-background.md) attribute, the following attributes are supported.
| Name | Type | Description |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](ts-basic-components-navigation.md#navigationcommontitle) \| [NavigationCustomTitle](ts-basic-components-navigation.md##navigationcustomtitle) | Page title. |
| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 3da68e65
# Navigation # Navigation
The **\<Navigation>** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings. The **\<Navigation>** component typically functions as the root container of a page and displays the title bar, toolbar, and navigation bar based on the attribute settings.
> **NOTE** > **NOTE**
> >
...@@ -11,12 +11,13 @@ The **\<Navigation>** component typically functions as the root container of a p ...@@ -11,12 +11,13 @@ The **\<Navigation>** component typically functions as the root container of a p
Supported Supported
Since API version 9, it is recommended that this component be used together with the **[\<NavRouter>](ts-basic-components-navrouter.md)** component.
## APIs ## APIs
Navigation() Navigation()
Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings.
## Attributes ## Attributes
...@@ -24,14 +25,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -24,14 +25,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description | | Name | Type | Description |
| -------------- | ---------------------------------------- | ---------------------------------------- | | -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Page title. | | title | string \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> \| [NavigationCommonTitle](#navigationcommontitle)<sup>9+</sup> \| [NavigationCustomTitle](#navigationcustomtitle)<sup>9+</sup> | Page title. |
| subTitle | string | Subtitle of the page. | | subTitle<sup>deprecated</sup> | string | Subtitle of the page. This attribute is deprecated since API version 9. You are advised to use **title** instead. |
| menus | Array<NavigationMenuItem&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Menu in the upper right corner of the page. | | menus | Array<[NavigationMenuItem](#navigationmenuitem)&gt; \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Menu items in the upper right corner of the page. When the value type is Array\<[NavigationMenuItem](#navigationmenuitem)>, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, plus excess icons (if any) under the automatically generated **More** icon. |
| titleMode | NavigationTitleMode | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**| | titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**|
| toolBar | object \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar.<br>**items**: all items on the toolbar. | | toolBar | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar.<br>**items**: items on the toolbar. |
| hideToolBar | boolean | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Show the toolbar.| | hideToolBar | boolean | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Display the toolbar.|
| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false** | | hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
| hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false** | | hideBackButton | boolean | Whether to hide the Back key.<br>Default value: **false**<br>**true**: Hide the Back key.<br>**false**: Display the Back key.|
| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | Width of the navigation bar.<br>Default value: **200vp**|
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**|
| mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**|
| backButtonIcon<sup>9+</sup> | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back icon on the navigation bar.|
| hideNavBar<sup>9+</sup> | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.|
## NavigationMenuItem ## NavigationMenuItem
...@@ -54,12 +61,49 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -54,12 +61,49 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Description | | Name | Description |
| ---- | ---------------------------------------- | | ---- | ---------------------------------------- |
| Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.| | Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.|
| Mini | The icon, main title, and subtitle are in mini mode. | | Mini | The title is fixed at mini mode. |
| Full | The main title and subtitle are in full mode. | | Full | The title is fixed at full mode. |
## NavigationCommonTitle
| Name | Type | Mandatory| Description |
| ------ | --------- | ---- | -------- |
| main | string | Yes| Main title.|
| sub | string | Yes| Subtitle.|
## NavigationCustomTitle
| Name | Type | Mandatory| Description |
| ------ | ----------------------- | ---- | ------------------------------ |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes| Content of the title bar.|
| height | [TitleHeight](#titleheight) \| [Length](ts-types.md#length) | Yes| Height of the title bar.|
## NavBarPosition
| Name| Description |
| ---- | ---------------------------------------- |
| Start | When two columns are displayed, the main column is at the start of the main axis.|
| End | When two columns are displayed, the main column is at the end of the main axis. |
## NavigationMode
| Name| Description |
| ---- | ---------------------------------------- |
| Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages.|
| Split | The navigation bar and content area are displayed in different columns.|
| Auto | When the window width is greater than or equal to 520 vp, Split mode is used. Otherwise, Stack mode is used.|
## TitleHeight
| Name| Description |
| ---- | ---------------------------------------- |
| MainOnly | Recommended height (56 vp) of the title bar when only the main title is available.|
| MainWithSub | Recommended height (82 vp) of the title bar when both the main title and subtitle exist.|
> **NOTE** > **NOTE**
> >
> Currently, the scrollable component can only be **\<List>**. > The scrollable component can only be **\<List>**.
## Events ## Events
...@@ -67,6 +111,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -67,6 +111,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ---------------------------------------- | ---------------------------------------- |
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.| | onTitleModeChange(callback: (titleMode: NavigationTitleMode) =&gt; void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
| onNavBarStateChange(callback: (isVisible: boolean) =&gt; void) | Triggered when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite.|
## Example ## Example
...@@ -77,143 +122,114 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -77,143 +122,114 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
@Component @Component
struct NavigationExample { struct NavigationExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State hideBar: boolean = true
@Builder NavigationTitle() {
Column() {
Text('title')
.width(80)
.height(60)
.fontColor(Color.Blue)
.fontSize(30)
}
.onClick(() => {
console.log("title")
})
}
@Builder NavigationMenus() {
Row() {
Image('images/add.png')
.width(25)
.height(25)
Image('comment/more.png')
.width(25)
.height(25)
.margin({ left: 30 })
}.width(100)
}
build() {
Column() {
Navigation() {
Search({ value: '', placeholder: "" }).width('85%').margin(26)
List({ space: 5, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('90%')
.height(80)
.backgroundColor('#3366CC')
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}
.listDirection(Axis.Vertical)
.height(300)
.margin({ top: 10, left: 18 })
.width('100%')
Button(this.hideBar ? "tool bar" : "hide bar")
.onClick(() => {
this.hideBar = !this.hideBar
})
.margin({ left: 135, top: 60 })
}
.title(this.NavigationTitle)
.subTitle('subtitle')
.menus(this.NavigationMenus)
.titleMode(NavigationTitleMode.Free)
.hideTitleBar(false)
.hideBackButton(false)
.onTitleModeChange((titleModel: NavigationTitleMode) => {
console.log('titleMode')
})
.toolBar({ items: [
{ value: 'app', icon: 'images/grid.svg', action: () => {
console.log("app")
} },
{ value: 'add', icon: 'images/add.svg', action: () => {
console.log("add")
} },
{ value: 'collect', icon: 'images/collect.svg', action: () => {
console.log("collect")
} }] })
.hideToolBar(this.hideBar)
}
}
}
```
![en-us_image_0000001256978359](figures/en-us_image_0000001256978359.gif)
```ts
// xxx.ets
@Entry
@Component
struct ToolbarBuilderExample {
@State currentIndex: number = 0 @State currentIndex: number = 0
@State Build: Array<Object> = [ @State Build: Array<Object> = [
{ {
icon: $r('app.media.ic_public_add'),
icon_after: $r('app.media.ic_public_addcolor'),
text: 'add', text: 'add',
num: 0 num: 0
}, },
{ {
icon: $r('app.media.ic_public_app'),
icon_after: $r('app.media.ic_public_appcolor'),
text: 'app', text: 'app',
num: 1 num: 1
}, },
{ {
icon: $r('app.media.ic_public_collect'),
icon_after: $r('app.media.ic_public_collectcolor'),
text: 'collect', text: 'collect',
num: 2 num: 2
} }
] ]
@Builder NavigationTitle() {
Column() {
Text('Title')
.fontColor('#182431')
.fontSize(30)
.lineHeight(41)
.fontWeight(700)
Text('subtitle')
.fontColor('#182431')
.fontSize(14)
.lineHeight(19)
.opacity(0.4)
.margin({ top: 2 })
}.alignItems(HorizontalAlign.Start)
}
@Builder NavigationMenus() {
Row() {
Image('common/navigation_icon1.svg')
.width(24)
.height(24)
Image('common/navigation_icon1.svg')
.width(24)
.height(24)
.margin({ left: 24 })
Image('common/navigation_icon2.svg')
.width(24)
.height(24)
.margin({ left: 24 })
}
}
@Builder NavigationToolbar() { @Builder NavigationToolbar() {
Row() { Row() {
ForEach(this.Build, item => { ForEach(this.Build, item => {
Column() { Column() {
Image(this.currentIndex == item.num ? item.icon_after : item.icon) Image(this.currentIndex == item.num ? 'common/public_icon_selected.svg' : 'common/public_icon.svg')
.width(25) .width(24)
.height(25) .height(24)
Text(item.text) Text(item.text)
.fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000") .fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431')
} .fontSize(10)
.lineHeight(14)
.fontWeight(500)
.margin({ top: 3 })
}.width(104).height(56)
.onClick(() => { .onClick(() => {
this.currentIndex = item.num this.currentIndex = item.num
}) })
.margin({ left: 70 })
}) })
} }.margin({ left: 24 })
} }
build() { build() {
Column() { Column() {
Navigation() { Navigation() {
Flex() { TextInput({ placeholder: 'search...' })
.width(336)
.height(40)
.backgroundColor('#FFFFFF')
.margin({ top: 8, left: 12 })
List({ space: 12, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width(336)
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
.fontSize(16)
.fontWeight(500)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
} }
.height(324)
.width('100%')
.margin({ top: 12, left: 12 })
} }
.title(this.NavigationTitle)
.menus(this.NavigationMenus)
.titleMode(NavigationTitleMode.Full)
.toolBar(this.NavigationToolbar) .toolBar(this.NavigationToolbar)
} .hideTitleBar(false)
.hideToolBar(false)
.onTitleModeChange((titleModel: NavigationTitleMode) => {
console.info('titleMode' + titleModel)
})
}.width('100%').height('100%').backgroundColor('#F1F3F5')
} }
} }
``` ```
![en-us_image_0000001212058484](figures/en-us_image_0000001212058484.gif) ![en-us_image_0000001192655288](figures/en-us_image_0000001192655288.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md 0 → 100644
浏览文件 @ 3da68e65
# NavRouter
The **\<NavRouter>** component provides default logic for click response processing, eliminating the need for manual logic definition.
> **NOTE**
>
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
This component must contain two child components, the second of which must be **[\<NavDestination>](ts-basic-components-navdestination.md)**.
## APIs
NavRouter()
## Events
| Name | Description |
| ------------------------------------------------------- | ------------------------------------------------------------ |
| onStateChange(callback: (isActivated: boolean) => void) | Invoked when the component activation status changes. The value **true** means that component is activated, and **false** means the opposite.<br>**NOTE**<br>After the user clicks **NavRouter**, if the **\<NavRouter>** component is activated and the corresponding **\<NavDestination>** child component loaded, **onStateChange(true)** is called. If the corresponding **\<NavDestination>** child component is no longer displayed, **onStateChange(false)** is called. |
en/application-dev/reference/arkui-ts/ts-components-summary.md 0 → 100644
浏览文件 @ 3da68e65
# Component Overview
## Rows and Columns
- [Column](ts-container-column.md)
A container that lays out child components vertically.
- [ColumnSplit](ts-container-columnsplit.md)
A container that lays out child components vertically and inserts a horizontal divider between every two child components.
- [Row](ts-container-row.md)
A container that lays out child components horizontally.
- [RowSplit](ts-container-rowsplit.md)
A container that lays out child components horizontally and inserts a vertical divider between every two child components.
- [SideBarContainer](ts-container-sidebarcontainer.md)
A container that contains a sidebar and content area as its child components. The sidebar is the first child component and can be shown or hidden as needed. The content area is the second child component.
## Stack, Flex, and Grid
- [Stack](ts-container-stack.md)
A container where child components are successively stacked and the latter one overwrites the previous one.
- [Flex](ts-container-flex.md)
A container that allows for flexible layout of child components.
- [GridContainer](ts-container-gridcontainer.md)
A container that lays out components vertically and is used only in the grid layout.
- [GridRow](ts-container-gridrow.md)
A container that is used in a grid layout, together with its child component **\<GridCol>**.
- [GridCol](ts-container-gridcol.md)
A container that must be used as a child component of the **\<GridRow>** container.
- [RelativeContainer](ts-container-relativecontainer.md)
A container that is used for element alignment in complex scenarios.
## List and Grid
- [List](ts-container-list.md)
A container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
- [ListItem](ts-container-listitem.md)
A component that displays a specific item in the list and that must be used together with **\<List>**.
- [ListItemGroup](ts-container-listitemgroup.md)
A component that displays list item groups and that must be used together with **\<List>**.
- [Grid](ts-container-grid.md)
A container that consists of cells formed by rows and columns. You can specify the cells where items are located to form various layouts.
- [GridItem](ts-container-griditem.md)
A container that provides a single item in a grid.
## Scroll and Swipe
- [Scroll](ts-container-scroll.md)
A container that scrolls the content when the layout size of a component exceeds the size of its parent component.
- [Swiper](ts-container-swiper.md)
A container that is able to display child components in looping mode.
- [WaterFlow](ts-container-waterflow.md)
A container that consists of cells formed by rows and columns and arranges items of different sizes from top to bottom according to the preset rules.
- [FlowItem](ts-container-flowitem.md)
A child component of the **\<WaterFlow>** container that is used to display specific items in the container layout.
## Navigation
- [Navigator](ts-container-navigator.md)
A container that provides redirection.
- [Navigation](ts-basic-components-navigation.md)
A container that typically functions as the root container of a page and displays the title bar, toolbar, and navigation bar based on the attribute settings.
- [NavRouter](ts-basic-components-navrouter.md)
A container that provides default logic for click response processing, eliminating the need for manual logic definition.
- [NavDestination](ts-basic-components-navdestination.md)
A child component of the **\<NavRouter>** component that represents a destination in the navigation area.
- [Stepper](ts-basic-components-stepper.md)
A component that provides a step navigator.
- [StepperItem](ts-basic-components-stepperitem.md)
A child component of the **\<Stepper>** component.
- [Tabs](ts-container-tabs.md)
A container that allows users to switch between content views through tabs.
- [TabContent](ts-container-tabcontent.md)
A component that corresponds to the content view on a tab page and is used only in the **\<Tabs>** component.
## Button and Selection
- [Button](ts-basic-components-button.md)
A component that can be used to create different types of buttons.
- [Toggle](ts-basic-components-toggle.md)
A component that provides a clickable element in the check box, button, or switch type.
- [Checkbox](ts-basic-components-checkbox.md)
A component that is used to enable or disable an option.
- [CheckboxGroup](ts-basic-components-checkboxgroup.md)
A component that is used to select or deselect all check boxes in a group.
- [DatePicker](ts-basic-components-datepicker.md)
A component that allows users to select a date from the given range.
- [TextPicker](ts-basic-components-textpicker.md)
A component that allows users to scroll to select text.
- [TimePicker](ts-basic-components-timepicker.md)
A component that allows users to select a time from the given range through scrolling.
- [Radio](ts-basic-components-radio.md)
A component that allows users to select from a set of mutually exclusive options.
- [Rating](ts-basic-components-rating.md)
A component that provides a rating bar.
- [Select](ts-basic-components-select.md)
A component that provides a drop-down list box to allow user to select among multiple options.
- [Slider](ts-basic-components-slider.md)
A component that is used to quickly adjust settings, such as the volume and brightness.
- [Counter](ts-container-counter.md)
A component that provides an operation to increase or decrease the number.
## Text and Input
- [Text](ts-basic-components-text.md)
A component that is used to display a piece of textual information.
- [Span](ts-basic-components-span.md)
A component that is used to display inline text in the **\<Text>** component.
- [Search](ts-basic-components-search.md)
A component that provides an area for users to enter search queries.
- [TextArea](ts-basic-components-textarea.md)
A component that provides multi-line text input and automatically wraps text so that each line does not have more than the width of the component.
- [TextInput](ts-basic-components-textinput.md)
A component that provides single-line text input.
- [PatternLock](ts-basic-components-patternlock.md)
A component that allows users to use a pattern password for authentication. It enters the input state once a finger is pressed against it, and exits the input state and completes the input once the finger leaves the screen.
- [RichText](ts-basic-components-richtext.md)
A component that parses and displays HTML text.
## Image, Video, and Media
- [Image](ts-basic-components-image.md)
A component that is used to render and display local and online images.
- [ImageAnimator](ts-basic-components-imageanimator.md)
A component that enables images to be played frame by frame. The list of images to be played as well as the duration of each image can be configured.
- [Video](ts-media-components-video.md)
A component that is used to play a video and control its playback.
- [PluginComponent](ts-basic-components-plugincomponent.md)
A component that allows the UI provided by an external application to be displayed in the application.
- [XComponent](ts-basic-components-xcomponent.md)
A component that can accept and display the EGL/OpenGL ES and media data input.
## Information Display
- [DataPanel](ts-basic-components-datapanel.md)
A component that displays proportions in a chart.
- [Gauge](ts-basic-components-gauge.md)
A component that is used to display data in a ring chart.
- [LoadingProgress](ts-basic-components-loadingprogress.md)
A component that is used to create a loading animation.
- [Marquee](ts-basic-components-marquee.md)
A component that is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\<Marquee>** component.
- [Progress](ts-basic-components-progress.md)
A component that is used to provide a progress indicator that displays the progress of content loading or an operation.
- [QRCode](ts-basic-components-qrcode.md)
A component that is used to display a QR code.
- [TextClock](ts-basic-components-textclock.md)
A component that displays the current system time in text format for different time zones. The time is accurate to seconds.
- [TextTimer](ts-basic-components-texttimer.md)
A component that displays timing information and is controlled in text format.
## Blank and Divider
- [Blank](ts-basic-components-blank.md)
A component that is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent component is **\<Row>** or **\<Column>**.
- [Divider](ts-basic-components-divider.md)
A component that is used to separate content blocks and elements.
## Canvas and Graphics Drawing
- [Canvas](ts-components-canvas-canvas.md)
A component that can be used to customize drawings.
- [Circle](ts-drawing-components-circle.md)
A component that is used to draw a circle.
- [Ellipse](ts-drawing-components-ellipse.md)
A component that is used to draw an ellipse.
- [Line](ts-drawing-components-line.md)
A component that is used to draw a straight line.
- [Polyline](ts-drawing-components-polyline.md)
A component that is used to draw a polyline.
- [Polygon](ts-drawing-components-polygon.md)
A component that is used to draw a polygon.
- [Path](ts-drawing-components-path.md)
A component that is used to define a closed shape.
- [Rect](ts-drawing-components-rect.md)
A component that is used to draw a rectangle.
- [Shape](ts-drawing-components-shape.md)
A parent component of the drawing components. The attributes provided by this component are universal attributes supported by all the drawing components.
## Web
- [Web](ts-basic-components-web.md)
A component that can be used to display web pages.
## Miscellaneous
- [ScrollBar](ts-basic-components-scrollbar.md)
A component that is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**.
- [Badge](ts-container-badge.md)
A container that can be attached to another component for tagging.
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
A component that can create a logically indexed array of items in a container for instant location.
- [Panel](ts-container-panel.md)
A container that presents lightweight content with flexible sizes.
- [Refresh](ts-container-refresh.md)
A container that provides the pull-to-refresh feature.
- [AbilityComponent](ts-container-ability-component.md)
A container that is used for independently displaying an ability.
- [RemoteWindow](ts-basic-components-remotewindow.md)
A component that is used to control the application window, providing the component animator and application window linkage animator during application startup and exit.
en/application-dev/reference/arkui-ts/ts-container-flowitem.md 0 → 100644
浏览文件 @ 3da68e65
# FlowItem
**\<FlowItem>** is a child component of the [\<WaterFlow>](ts-container-waterflow.md) container and is used to display specific items in the container layout.
> **NOTE**
>
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
This component supports only one child component.
## APIs
FlowItem()
Ceates a child component in the **\<WaterFlow>** layout.
## Attributes
None
## Example
See [WaterFlow](ts-container-waterflow.md#example).
en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md
浏览文件 @ 3da68e65
...@@ -14,7 +14,7 @@ The **\<RelativeContainer>** component is used for element alignment in complex ...@@ -14,7 +14,7 @@ The **\<RelativeContainer>** component is used for element alignment in complex
* A child component can set the container or another child component as the anchor. * A child component can set the container or another child component as the anchor.
* To show in the **\<RelativeContainer>**, child components must have an ID. The container ID is fixed at **__container__**. * To show in the **\<RelativeContainer>**, child components must have an ID. The container ID is fixed at **__container__**.
* Three positions of the child component in a direction can use three positions of the container or another child components in the same direction as anchors. If anchors are set for more than two positions in a single direction, the third position is skipped. * Three positions of the child component in a direction can use three positions of the container or another child components in the same direction as anchors. If anchors are set for more than two positions in a single direction, the third position is skipped.
* The child component size set on the frontend page is not affected by the **\<RelativeContainer>** rules. * The child component size set on the frontend page is not affected by the **\<RelativeContainer>** rules. If two or more **alignRules** values are set for one direction of the child component, you are not advised to set the size for this direction.
* If offset is required after the alignment, it can be set through **offset**. * If offset is required after the alignment, it can be set through **offset**.
* Exceptions * Exceptions
* When a mutual or circular dependency occurs, none of the child components in the container are drawn. * When a mutual or circular dependency occurs, none of the child components in the container are drawn.
...@@ -37,62 +37,60 @@ RelativeContainer() ...@@ -37,62 +37,60 @@ RelativeContainer()
struct Index { struct Index {
build() { build() {
Row() { Row() {
Button("Extra button").width(100).height(50)
RelativeContainer() { RelativeContainer() {
Button("Button 1") Row().width(100).height(100)
.width(120) .backgroundColor("#FF3333")
.height(30)
.alignRules({ .alignRules({
middle: { anchor: "__container__", align: HorizontalAlign.Center }, top: {anchor: "__container__", align: VerticalAlign.Top},
left: {anchor: "__container__", align: HorizontalAlign.Start}
}) })
.id("bt1") .id("row1")
.borderWidth(1)
.borderColor(Color.Black)
Text("This is text 2") Row().width(100).height(100)
.fontSize(20) .backgroundColor("#FFCC00")
.padding(10)
.alignRules({ .alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, top: {anchor: "__container__", align: VerticalAlign.Top},
top: { anchor: "bt1", align: VerticalAlign.Bottom }, right: {anchor: "__container__", align: HorizontalAlign.End}
right: { anchor: "bt1", align: HorizontalAlign.Center }
}) })
.id("tx2") .id("row2")
.borderWidth(1)
.borderColor(Color.Black) Row().height(100)
.height(30) .backgroundColor("#FF6633")
Button("Button 3")
.width(100)
.height(100)
.alignRules({ .alignRules({
left: { anchor: "bt1", align: HorizontalAlign.End }, top: {anchor: "row1", align: VerticalAlign.Bottom},
top: { anchor: "tx2", align: VerticalAlign.Center }, left: {anchor: "row1", align: HorizontalAlign.End},
bottom: { anchor: "__container__", align: VerticalAlign.Bottom } right: {anchor: "row2", align: HorizontalAlign.Start}
}) })
.id("bt3") .id("row3")
.borderWidth(1)
.borderColor(Color.Black)
Text("This is text 4") Row()
.fontSize(20) .backgroundColor("#FF9966")
.padding(10)
.alignRules({ .alignRules({
left: { anchor: "tx2", align: HorizontalAlign.End }, top: {anchor: "row3", align: VerticalAlign.Bottom},
right: { anchor: "__container__", align: HorizontalAlign.End }, bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
top: { anchor: "__container__", align: VerticalAlign.Top }, left: {anchor: "__container__", align: HorizontalAlign.Start},
bottom: { anchor: "bt3", align: VerticalAlign.Top } right: {anchor: "row1", align: HorizontalAlign.End}
}) })
.id("tx4") .id("row4")
.borderWidth(1)
.borderColor(Color.Black) Row()
.backgroundColor("#FF66FF")
.alignRules({
top: {anchor: "row3", align: VerticalAlign.Bottom},
bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
left: {anchor: "row2", align: HorizontalAlign.Start},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.id("row5")
} }
.width(200).height(200) .width(300).height(300)
.backgroundColor(Color.Orange) .margin({left: 100})
.border({width:2, color: "#6699FF"})
} }
.height('100%') .height('100%')
} }
} }
``` ```
![relative container](figures/relativecontainer.png) ![relative container](figures/relativecontainer.png)
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 3da68e65
...@@ -40,9 +40,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -40,9 +40,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**| | displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** | | cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** |
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** | | disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**| | curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Ease**|
| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md#resourcecolor),<br>selectedColor?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style of the navigation dots indicator.<br>\- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation dots indicator.<br>\- **mask**: whether to enable the mask for the navigation dots indicator.<br>\- **color**: color of the navigation dots indicator.<br>\- **selectedColor**: color of the selected navigation dot.| | indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation dots indicator.<br>\- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation dots indicator.<br>\- **mask**: whether to enable the mask for the navigation dots indicator.<br>\- **color**: color of the navigation dots indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display.<br>Default value: **1** | | displayCount<sup>8+</sup> | number\|string | Number of elements to display per page.<br>Default value: **1** |
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**| | effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
## SwiperDisplayMode ## SwiperDisplayMode
...@@ -52,17 +52,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -52,17 +52,9 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Stretch | The slide width of the **\<Swiper>** component is equal to the width of the component.| | Stretch | The slide width of the **\<Swiper>** component is equal to the width of the component.|
| AutoLinear | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.| | AutoLinear | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.|
## EdgeEffect
| Name | Description |
| ------ | ------------------------------------------------------------------------- |
| Spring | Spring effect. When sliding to one edge, the component can move beyond the bounds through touches, and produce a bounce effect when the user releases their finger. |
| Fade | Fade effect. When sliding to one edge, the component can move beyond the bounds through touches, and produce a fade effect along the way; when the user releases their finger, the fade changes. |
| None | No effect. When sliding to one edge, the component cannot move beyond the bounds. |
## SwiperController ## SwiperController
Controller of the **\<Swiper>** component. You can bind this object to the **\<Swiper>** component and use it to control page switching. Controller of the **\<Swiper>** component. You can bind this object to the **<Swiper>** component and use it to control page switching.
### showNext ### showNext
...@@ -84,9 +76,9 @@ Stops an animation. ...@@ -84,9 +76,9 @@ Stops an animation.
**Parameters** **Parameters**
| Name | Type | Mandatory.| Description| | Name | Type | Mandatory | Description|
| --------- | ---------- | ------ | -------- | | --------- | ---------- | ------ | -------- |
| callback | () => void | Yes | Callback invoked when the animation stops.| | callback | () => void | No | Callback invoked when the animation stops.|
## Events ## Events
...@@ -96,11 +88,15 @@ onChange(event: (index: number) => void) ...@@ -96,11 +88,15 @@ onChange(event: (index: number) => void)
Triggered when the index of the currently displayed child component changes. Triggered when the index of the currently displayed child component changes.
**Parameters** > **NOTE**
>
> When the **\<Swiper>** component is used together with **LazyForEach**, the subpage UI cannot be refreshed in the **onChange** event.
| Name | Type | Mandatory.| Description| **Return value**
| --------- | ---------- | ------ | -------- |
| index | number | Yes | Index of the currently displayed element.| | Name | Type | Description|
| --------- | ---------- | -------- |
| index | number | Index of the currently displayed element.|
## Example ## Example
...@@ -149,36 +145,36 @@ struct SwiperExample { ...@@ -149,36 +145,36 @@ struct SwiperExample {
Column({ space: 5 }) { Column({ space: 5 }) {
Swiper(this.swiperController) { Swiper(this.swiperController) {
LazyForEach(this.data, (item: string) => { LazyForEach(this.data, (item: string) => {
Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
}, item => item) }, item => item)
} }
.cachedCount(2) .cachedCount(2)
.index(1) .index(1)
.autoPlay(true) .autoPlay(true)
.interval(4000) .interval(4000)
.indicator(true) // Navigation dots are enabled by default. .indicator(true)
.loop(false) // Loop playback is enabled by default. .loop(true)
.duration(1000) .duration(1000)
.vertical(false) // Horizontal swiping is enabled by default.
.itemSpace(0) .itemSpace(0)
.curve(Curve.Linear) // Animation curve. .curve(Curve.Linear)
.onChange((index: number) => { .onChange((index: number) => {
console.info(index.toString()) console.info(index.toString())
}) })
Flex({ justifyContent: FlexAlign.SpaceAround }) { Row({ space: 12 }) {
Button('next') Button('showNext')
.onClick(() => { .onClick(() => {
this.swiperController.showNext() this.swiperController.showNext()
}) })
Button('preview') Button('showPrevious')
.onClick(() => { .onClick(() => {
this.swiperController.showPrevious() this.swiperController.showPrevious()
}) })
} }.margin(5)
}.margin({ top: 5 }) }.width('100%')
.margin({ top: 5 })
} }
} }
``` ```
![en-us_image_0000001211898474](figures/en-us_image_0000001211898474.gif) ![swiper](figures/swiper.gif)
en/application-dev/reference/arkui-ts/ts-container-waterflow.md 0 → 100644
浏览文件 @ 3da68e65
# WaterFlow
The **\<WaterFlow>** component is a container that consists of cells formed by rows and columns and arranges items of different sizes from top to bottom according to the preset rules.
> **NOTE**
>
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
The [\<FlowItem>](ts-container-flowitem.md) child component is supported.
## APIs
WaterFlow(options?: {footer?: CustomBuilder, scroller?: Scroller})
**Parameters**
| Name | Type | Mandatory| Description |
| ---------- | ----------------------------------------------- | ------ | -------------------------------------------- |
| footer | [CustomBuilder](ts-types.md#custombuilder8) | No | Footer of the **\<WaterFlow>** component. |
| scroller | [Scroller](ts-container-scroll.md#scroller) | No | Controller, which can be bound to scrollable components.<br>The **\<WaterFlow>** component supports only the **scrollToIndex** API of the **\<Scroller>** component.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| columnsTemplate | string | Number of columns in the layout. If this attribute is not set, one column is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three columns, with the first column taking up 1/4 of the parent component's full width, the second column 1/4, and the third column 2/4. This attribute supports [auto-fill](#auto-fill).<br>Default value: **'1fr'**|
| rowsTemplate | string | Number of rows in the layout. If this attribute is not set, one row is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4. This attribute supports [auto-fill](#auto-fill).<br>Default value: **'1fr'**|
| itemConstraintSize | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | Size constraints of the child components during layout. |
| columnsGap | Length |Gap between columns.<br>Default value: **0**|
| rowsGap | Length |Gap between rows.<br> Default value: **0**|
| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |Main axis direction of the layout.<br>Default value: **FlexDirection.Column**|
The priority of **layoutDirection** is higher than that of **rowsTemplate** and **columnsTemplate**. Depending on the **layoutDirection** settings, there are three layout modes:
- **layoutDirection** is set to **FlexDirection.Column** or **FlexDirection.ColumnReverse**
In this case, **columnsTemplate** is valid. If it is not set, the default value is used. For example, if **columnsTemplate** is set to **"1fr 1fr"** and **rowsTemplate** **"1fr 1fr 1fr"**, child components are arranged in vertical layout, with the cross axis equally divided into two columns.
- **layoutDirection** set to **FlexDirection.Row** or **FlexDirection.RowReverse**
In this case, **rowsTemplate** is valid. If it is not set, the default value is used. For example, if **columnsTemplate** is set to **"1fr 1fr"** and **rowsTemplate** **"1fr 1fr 1fr"**, child components are arranged in horizontal layout, with the cross axis equally divided into three columns.
- **layoutDirection** is not set
In this case, the default value of **layoutDirection** is used, which is **FlexDirection.Column**, and **columnsTemplate** is valid. For example, if **columnsTemplate** is set to **"1fr 1fr"** and **rowsTemplate** **"1fr 1fr 1fr"**, child components are arranged in vertical layout, with the cross axis equally divided into two columns.
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| onReachStart(event: () => void) | Triggered when the component reaches the start.|
| onReachEnd(event: () => void) | Triggered when the component reaches the end.|
## auto-fill
The **columnsTemplate** and **rowsTemplate** attributes supports **auto-fill** in the following format:
```css
repeat(auto-fill, track-size)
```
Where, **repeat** and **auto-fill** are keywords, and **track-size** indicates the row height or column width. The supported units include px, vp, %, and digits. The value of **track-size** must contain at least one valid row height or column width.
## Example
```ts
// WaterFlowDataSource.ets
// Object that implements the IDataSource API, which is used by the <WaterFlow> component to load data.
export class WaterFlowDataSource implements IDataSource {
private dataArray: number[] = []
private listeners: DataChangeListener[] = []
constructor() {
for (let i = 0; i < 100; i++) {
this.dataArray.push(i)
}
}
// Obtain the data corresponding to the specified index.
public getData(index: number): any {
return this.dataArray[index]
}
// Notify the controller of data reloading.
notifyDataReload(): void {
this.listeners.forEach(listener => {
listener.onDataReloaded()
})
}
// Notify the controller of data addition.
notifyDataAdd(index: number): void {
this.listeners.forEach(listener => {
listener.onDataAdded(index)
})
}
// Notify the controller of data changes.
notifyDataChange(index: number): void {
this.listeners.forEach(listener => {
listener.onDataChanged(index)
})
}
// Notify the controller of data deletion.
notifyDataDelete(index: number): void {
this.listeners.forEach(listener => {
listener.onDataDeleted(index)
})
}
// Notify the controller of the data location change.
notifyDataMove(from: number, to: number): void {
this.listeners.forEach(listener => {
listener.onDataMoved(from, to)
})
}
// Obtain the total number of data records.
public totalCount(): number {
return this.dataArray.length
}
// Register the data change listener.
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener)
}
}
// Unregister the data change listener.
unregisterDataChangeListener(listener: DataChangeListener): void {
const pos = this.listeners.indexOf(listener)
if (pos >= 0) {
this.listeners.splice(pos, 1)
}
}
// Add data.
public Add1stItem(): void {
this.dataArray.splice(0, 0, this.dataArray.length)
this.notifyDataAdd(0)
}
// Add an item to the end of the data.
public AddLastItem(): void {
this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)
this.notifyDataAdd(this.dataArray.length-1)
}
// Add an item to the position corresponding to the specified index.
public AddItem(index: number): void {
this.dataArray.splice(index, 0, this.dataArray.length)
this.notifyDataAdd(index)
}
// Delete the first item.
public Delete1stItem(): void {
this.dataArray.splice(0, 1)
this.notifyDataDelete(0)
}
// Delete the second item.
public Delete2ndItem(): void {
this.dataArray.splice(1, 1)
this.notifyDataDelete(1)
}
// Delete the last item.
public DeleteLastItem(): void {
this.dataArray.splice(-1, 1)
this.notifyDataDelete(this.dataArray.length)
}
// Reload data.
public Reload(): void {
this.dataArray.splice(1, 1)
this.dataArray.splice(3, 2)
this.notifyDataReload()
}
}
```
```ts
// WaterflowDemo.ets
import { WaterFlowDataSource } from './WaterFlowDataSource'
@Entry
@Component
struct WaterflowDemo {
@State minSize: number = 50
@State maxSize: number = 100
@State fontSize: number = 24
@State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
scroller: Scroller = new Scroller()
datasource: WaterFlowDataSource = new WaterFlowDataSource()
private itemWidthArray: number[] = []
private itemHeightArray: number[] = []
// Calculate the width and height of a flow item.
getSize() {
let ret = Math.floor(Math.random() * this.maxSize)
return (ret > this.minSize ? ret : this.minSize)
}
// Save the width and height of the flow item.
getItemSizeArray() {
for (let i = 0; i < 100; i++) {
this.itemWidthArray.push(this.getSize())
this.itemHeightArray.push(this.getSize())
}
}
aboutToAppear() {
this.getItemSizeArray()
}
@Builder itemFoot() {
Column() {
Text(`Footer`)
.fontSize(10)
.backgroundColor(Color.Red)
.width(50)
.height(50)
.align(Alignment.Center)
.margin({ top: 2 })
}
}
build() {
Column({ space: 2 }) {
WaterFlow({ footer: this.itemFoot, scroller: this.scroller }) {
LazyForEach(this.datasource, (item: number) => {
FlowItem() {
Column() {
Text("N" + item).fontSize(12).height('16')
Image('res/waterFlowTest(' + item % 5 + ').jpg')
.objectFit(ImageFit.Fill)
}
}
.width(this.itemWidthArray[item])
.height(this.itemHeightArray[item])
.backgroundColor(this.colors[item % 5])
}, item => item)
}
.columnsTemplate("1fr 1fr 1fr 1fr")
.itemConstraintSize({
minWidth: 0,
maxWidth: '100%',
minHeight: 0,
maxHeight: '100%'
})
.columnsGap(10)
.rowsGap(5)
.onReachStart(() => {
console.info("onReachStart")
})
.onReachEnd(() => {
console.info("onReachEnd")
})
.backgroundColor(0xFAEEE0)
.width('100%')
.height('80%')
.layoutDirection(FlexDirection.Column)
}
}
}
```
![en-us_image_WaterFlow.gif](figures/waterflow.gif)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或