Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 c5a9ffab 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!19241 【3.2-Release】翻译完成 19147+18741+18778+18405+18379+18201+18486+18570+18265+18448 

Merge pull request !19241 from ester.zhou/C2-19147
上级 6b948895 b7f455f4
展开全部 显示空白变更内容
内联 并排
Showing with 291 addition and 146 deletion
en/application-dev/reference/apis/js-apis-inputmethod.md
浏览文件 @ c5a9ffab
......@@ -60,7 +60,7 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | ------------------------------ |
| 12800006 | Input method controller error. |
| 12800006 | input method controller error. |
**Example**
......@@ -88,7 +88,7 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800007 | Input method settings extension error. |
| 12800007 | input method settings extension error. |
**Example**
......@@ -119,8 +119,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800005 | Configuration persisting error. |
| 12800008 | Input method manager service error. |
| 12800005 | configuration persisting error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -176,8 +176,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800005 | Configuration persisting error. |
| 12800008 | Input method manager service error. |
| 12800005 | configuration persisting error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -248,8 +248,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800005 | Configuration persisting error. |
| 12800008 | Input method manager service error. |
| 12800005 | configuration persisting error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -309,8 +309,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800005 | Configuration persisting error. |
| 12800008 | Input method manager service error. |
| 12800005 | configuration persisting error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -384,8 +384,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800005 | Configuration persisting error. |
| 12800008 | Input method manager service error. |
| 12800005 | configuration persisting error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -438,8 +438,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800005 | Configuration persisting error. |
| 12800008 | Input method manager service error. |
| 12800005 | configuration persisting error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -447,7 +447,7 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
let im = inputMethod.getCurrentInputMethod();
let imSubType = inputMethod.getCurrentInputMethodSubtype();
try {
inputMethod.switchCurrentInputMethodAndSubtype(inputMethodProperty, imSubType).then((result) => {
inputMethod.switchCurrentInputMethodAndSubtype(im, imSubType).then((result) => {
if (result) {
console.info('Succeeded in switching currentInputMethodAndSubtype.');
} else {
......@@ -533,8 +533,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800003 | Input method client error. |
| 12800008 | Input method manager service error. |
| 12800003 | input method client error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -576,8 +576,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800003 | Input method client error. |
| 12800008 | Input method manager service error. |
| 12800003 | input method client error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -619,8 +619,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800003 | Input method client error. |
| 12800008 | Input method manager service error. |
| 12800003 | input method client error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -656,8 +656,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800003 | Input method client error. |
| 12800008 | Input method manager service error. |
| 12800003 | input method client error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -691,8 +691,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800003 | Input method client error. |
| 12800008 | Input method manager service error. |
| 12800003 | input method client error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -728,8 +728,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800003 | Input method client error. |
| 12800008 | Input method manager service error. |
| 12800003 | input method client error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -876,8 +876,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800001 | Package manager error. |
| 12800008 | Input method manager service error. |
| 12800001 | package manager error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -928,8 +928,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800001 | Package manager error. |
| 12800008 | Input method manager service error. |
| 12800001 | package manager error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -972,8 +972,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800001 | Package manager error. |
| 12800008 | Input method manager service error. |
| 12800001 | package manager error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -1011,8 +1011,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800001 | Package manager error. |
| 12800008 | Input method manager service error. |
| 12800001 | package manager error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -1049,8 +1049,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800001 | Package manager error. |
| 12800008 | Input method manager service error. |
| 12800001 | package manager error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -1088,8 +1088,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800001 | Package manager error. |
| 12800008 | Input method manager service error. |
| 12800001 | package manager error. |
| 12800008 | input method manager service error. |
**Return value**
......@@ -1131,7 +1131,7 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800008 | Input method manager service error. |
| 12800008 | input method manager service error. |
**Example**
......@@ -1169,7 +1169,7 @@ For details about the error codes, see [Input Method Framework Error Codes](../e
| Error Code ID| Error Message |
| -------- | -------------------------------------- |
| 12800008 | Input method manager service error. |
| 12800008 | input method manager service error. |
**Example**
......
en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
浏览文件 @ c5a9ffab
# Blank
The **\<Blank>** component is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent container is **\<Row>** or **\<Column>**.
The **\<Blank>** component is able to automatically fill the empty spaces in the container along the main axis. It works only when the parent component is **\<Row>**, **\<Column>**, or **\<Flex>**.
> **NOTE**
>
......@@ -30,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description|
| -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.<br>Default value: **Color.Transparent**<br>Since API version 9, this API is supported in ArkTS widgets. |
| color | [ResourceColor](ts-types.md#resourcecolor) | Color to fill the empty spaces.<br>Default value: **Color.Transparent**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Events
......@@ -50,7 +50,7 @@ struct BlankExample {
Row() {
Text('Bluetooth').fontSize(18)
Blank()
Toggle({ type: ToggleType.Switch })
Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
}.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
}.backgroundColor(0xEFEFEF).padding(20)
}
......@@ -80,14 +80,14 @@ struct BlankExample {
Row() {
Text('Bluetooth').fontSize(18)
Blank().color(Color.Yellow)
Toggle({ type: ToggleType.Switch })
Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
}.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
Row() {
Text('Bluetooth').fontSize(18)
// Set the minimum width to 160.
Blank('160').color(Color.Yellow)
Toggle({ type: ToggleType.Switch })
Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
}.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
}.backgroundColor(0xEFEFEF).padding(20).width('100%')
......
en/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ c5a9ffab
......@@ -29,7 +29,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description |
| ---- | ---------------------------------------- | ---- | ---------------------------------------- |
| src | [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://** path prefix are supported, which are used to access the image path provided by a Data ability.<br/>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the application has the read permission to the files in the specified path.<br/>**NOTE**<br/>- ArkTS widgets support GIF images, but the images are played only once when they are displayed.<br/>- ArkTS widgets do not support the **http://**, **datashare://**, or **file://data/storage** path prefixes.<br>- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type. |
| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://** prefix are supported, which are used to access the image path provided by a Data ability.<br/>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the current application. Ensure that the application has the read permission to the files in the specified path.<br/>**NOTE**<br/>- ArkTS widgets support GIF animations, but the animations only play once on display.<br/>- ArkTS widgets do not support the strings with the **http://**, **datashare://**, or **file:///data/storage** prefix.<br>- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type. |
## Attributes
......@@ -55,7 +55,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
>
> To use shortcut keys to copy the image, the image must be in focus. To enable the image to gain focus, set both the **focusable** and **focusOnTouch** attributes to **true**.
>
> For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, and **animate**.
> For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, and **polygon**.
### ImageInterpolation
......@@ -415,4 +415,86 @@ struct LoadImageExample {
}
}
```
<!--no_check-->
\ No newline at end of file
### Applying a Filter to an Image
```ts
// xxx.ets
@Entry
@Component
struct colorFilterExample {
@State colorFilterR: number = 0
@State colorFilterG: number = 0
@State colorFilterB: number = 0
@State colorFilterA: number = 0
build() {
Row() {
Column() {
Image($r('app.media.sky'))
.width(200)
.height(200)
Image($r('app.media.sky'))
.width(200)
.height(200)
.colorFilter([
this.colorFilterR, 0, this.colorFilterR, 0, 0,
0, this.colorFilterG, this.colorFilterG, 0, 0,
this.colorFilterB, 0, this.colorFilterB, 0, 0,
0, 0, this.colorFilterA, 0, 0
])
Row() {
Text('R')
Slider({
min: 0,
max: 1,
step: 0.01
})
.onChange((valueR) => {
this.colorFilterR = valueR
})
}
Row() {
Text('G')
Slider({
min: 0,
max: 1,
step: 0.01
})
.onChange((valueG) => {
this.colorFilterG = valueG
})
}
Row() {
Text('B')
Slider({
min: 0,
max: 1,
step: 0.01
})
.onChange((valueB) => {
this.colorFilterB = valueB
})
}
Row() {
Text('A')
Slider({
min: 0,
max: 1,
step: 0.01
})
.onChange((valueA) => {
this.colorFilterA = valueA
})
}
}.width('90%').alignItems(HorizontalAlign.Center)
}.height('100%').width('100%').justifyContent(FlexAlign.Center)
}
}
```
![colorFilter](figures/colorFilter.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
浏览文件 @ c5a9ffab
......@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | string | Yes| Content of the QR code.|
| value | string | Yes| Content of the QR code. A maximum of 256 characters are supported. If the number of characters exceeds 256, the first 256 characters are used.<br>**NOTE**<br>The string cannot be **null**, **undefined**, or empty.|
## Attributes
......
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ c5a9ffab
......@@ -18,8 +18,8 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
| Name | Type | Mandatory| Description |
| ----------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
| value | string | No | Text input in the search text box.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).|
| icon | string | No | Path to the search icon. By default, the system search icon is used.<br>For details about the supported image types, see [Image](ts-basic-components-image.md).|
| value | string | No | Text input in the search text box. |
| icon | string | No | Path to the search icon. By default, the system search icon is used.<br>**NOTE**<br>The icon data source can be a local or online image.<br>- The supported formats include PNG, JPG, BMP, SVG, GIF, and pixelmap.<br>- The Base64 string is supported in the following format: data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.|
| controller | SearchController | No | Controller of the **\<Search>** component. |
## Attributes
......
en/application-dev/reference/arkui-ts/ts-basic-components-slider.md
浏览文件 @ c5a9ffab
......@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | number | No| Current progress.<br>Default value: **0**|
| value | number | No| Current progress.<br>Default value: min|
| min | number | No| Minimum value.<br>Default value: **0**|
| max | number | No| Maximum value.<br>Default value: **100**<br>**NOTE**<br>If the value of **min** is greater than or equal to the value of **max**, the default value **0** is used for **min** and the default value **100** is used for **max**.<br>If the value is not within the [min, max] range, the value of **min** or **max**, whichever is closer.|
| step | number | No| Step of the slider.<br>Default value: **1**<br>Value range: [0.01, max]<br>**NOTE**<br>If this parameter is set to a value less than 0 or a percentage, the default value is used.|
......@@ -48,7 +48,7 @@ Except touch target attributes, the universal attributes are supported.
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.<br>Since API version 9, this API is supported in ArkTS widgets.|
| showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When **direction** is set to **Axis.Horizontal**, the bubble is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the bubble is displayed on the left of the slider.<br>The drawing area of the bubble is the overlay of the slider.<br>If no margin is set for the slider or the margin is not large enough, the bubble will be clipped.|
| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.|
| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
## Events
......
en/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md
浏览文件 @ c5a9ffab
......@@ -24,7 +24,7 @@ StepperItem()
| -------- | -------- | -------- |
| prevLabel | string | Text label of the button on the left, which is not displayed on the first page. When the **\<Stepper>** contains more than one page, the default value for all pages except the first page is **Back**.|
| nextLabel | string | Text label of the button on the right. The default value is **Start** for the last page and **Next** for the other pages.|
| status | ItemState | Display status of **nextLabel** in the stepper.<br>Default value: **ItemState.Normal**|
| status | [ItemState](#itemstate) | Display status of **nextLabel** in the stepper. Optional.<br>Default value: **ItemState.Normal**|
## ItemState
......
en/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ c5a9ffab
......@@ -30,7 +30,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| ----------------------- | ----------------------------------- | ------------------------------------------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment mode of the text.<br>Default value: **TextAlign.Start**<br>**NOTE**<br>The text takes up the full width of the **\<Text>** component. To set the vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute.<br>Since API version 9, this API is supported in ArkTS widgets.|
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment mode of the text.<br>Default value: **TextAlign.Start**<br>**NOTE**<br>The text takes up the full width of the **\<Text>** component. To set vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute. The **align** attribute alone does not control the horizontal position of the text. In other words, **Alignment.TopStart**, **Alignment.Top**, and **Alignment.TopEnd** produce the same effect, top-aligning the text; **Alignment.Start**, **Alignment.Center**, and **Alignment.End** produce the same effect, centered-aligning the text vertically; **Alignment.BottomStart**, **Alignment.Bottom**, and **Alignment.BottomEnd** produce the same effect, bottom-aligning the text. Yet, it can work with the **textAlign** attribute to jointly determine the horizontal position of the text.<br>Since API version 9, this API is supported in ArkTS widgets.|
| textOverflow | {overflow: [TextOverflow](ts-appendix-enums.md#textoverflow)} | Display mode when the text is too long.<br>Default value: **{overflow: TextOverflow.Clip}**<br>**NOTE**<br/>Text is clipped at the transition between words. To clip text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect.<br>Since API version 9, this API is supported in ArkTS widgets.|
| maxLines | number | Maximum number of lines in the text.<br>Default value: **Infinity**<br>**NOTE**<br/>By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.<br>Since API version 9, this API is supported in ArkTS widgets.|
| lineHeight | string \| number \| [Resource](ts-types.md#resource) | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.<br>Since API version 9, this API is supported in ArkTS widgets.|
......@@ -109,7 +109,7 @@ struct TextExample1 {
Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)
// Clip the text when the value of maxLines is exceeded.
Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
.textOverflow({ overflow: TextOverflow.None })
.textOverflow({ overflow: TextOverflow.Clip })
.maxLines(1)
.fontSize(12)
.border({ width: 1 })
......
en/application-dev/reference/arkui-ts/ts-basic-components-toggle.md
浏览文件 @ c5a9ffab
......@@ -31,9 +31,9 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Description |
| -------- | ---------------- |
| Checkbox | Check box type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
| Checkbox | Check box type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 px,<br> right: 12 px,<br> bottom: 12 px,<br> left: 12 px<br> } |
| Button | Button type. The set string, if any, will be displayed inside the button. |
| Switch | Switch type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right:6 vp,<br> bottom: 6 vp,<br> left: 14 vp<br> } |
| Switch | Switch type.<br>**NOTE**<br>The default value of the universal attribute [margin](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right:6 vp,<br> bottom: 14 vp,<br> left: 6 vp<br> } |
## Attributes
......
en/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ c5a9ffab
......@@ -10,7 +10,7 @@ The **\<List>** component provides a list container that presents a series of li
## Child Components
This component supports the **[\<ListItem>](ts-container-listitem.md)** and **[\<ListItemGroup>](ts-container-listitemgroup.md)** child components.
This component supports the [\<ListItem>](ts-container-listitem.md) and [\<ListItemGroup>](ts-container-listitemgroup.md) child components.
> **NOTE**
>
......@@ -52,14 +52,14 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description|
| -------- | -------- | -------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | Direction in which the list items are arranged.<br>Default value: **Axis.Vertical**<br>Since API version 9, this API is supported in ArkTS widgets.|
| divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md#resourcecolor),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider. This attribute cannot be set in percentage.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.<br>Since API version 9, this API is supported in ArkTS widgets.<br>The sum of **endMargin** and **startMargin** cannot exceed the column width.<br>**startMargin** and **endMargin** cannot be set in percentage.<br>The divider is drawn between list items along the main axis, and not above the first list item and below the last list item.<br>In multi-column mode, the value of **startMargin** is calculated from the start edge of the cross axis of each column. In other cases, it is calculated from the start edge of the cross axis of the list.|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>In API version 9 and earlier versions, the default value is **BarState.Off**. In API version 10, the default value is **BarState.Auto**.|
| divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?:[ResourceColor](ts-types.md#resourcecolor),<br>startMargin?: Length,<br>endMargin?: Length<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start edge of the list.<br>- **endMargin**: distance between the divider and the end edge of the list.<br>Since API version 9, this API is supported in ArkTS widgets.<br>The sum of **endMargin** and **startMargin** cannot exceed the column width.<br>**startMargin** and **endMargin** cannot be set in percentage.<br>The divider is drawn between list items along the main axis, and not above the first list item and below the last list item.<br>In multi-column mode, the value of **startMargin** is calculated from the start edge of the cross axis of each column. In other cases, it is calculated from the start edge of the cross axis of the list.|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**<br>Since API version 9, this API is supported in ArkTS widgets. |
| cachedCount | number | Number of list items or list item groups to be preloaded (cached). It works only in [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md). A list item group is calculated as a whole, and all list items of the group are preloaded at the same time. For details, see [Minimizing White Blocks During Swiping](../../ui/arkts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>In single-column mode, the number of the list items to be cached before and after the currently displayed one equals the value of **cachedCount**.<br>In multi-column mode, the number of the list items to be cached is the value of **cachedCount** multiplied by the number of columns.|
| editMode<sup>(deprecated)</sup> | boolean | Whether to enter editing mode.<br>This API is deprecated since API version 9.<br>Default value: **false**|
| editMode<sup>(deprecated)</sup> | boolean | Whether to enter editing mode.<br>This API is deprecated since API version 9. For details about how to implement deletion of a selected list item, see [Example 3](#example-3).<br>Default value: **false**|
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. The spring effect and shadow effect are supported.<br>Default value: **EdgeEffect.Spring**<br>Since API version 9, this API is supported in ArkTS widgets.|
| chainAnimation | boolean | Whether to display chained animations on this list when it slides or its top or bottom is dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br>Default value: **false**<br>- **false**: No chained animations are displayed.<br>- **true**: Chained animations are displayed.<br>Since API version 9, this API is supported in ArkTS widgets.|
| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>Default value: **1**<br>The rules are as follows:<br>- If the value is set to a number, the column width is calculated by dividing the cross-axis width of the **\<List>** component by the specified number.<br>- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized.<br>- If the value is set to {minLength, maxLength}, and the cross-axis width constraint of the parent component is infinite, the parent component is arranged by column, and the column width is calculated based on the maximum width of list items in the display area.<br>- Each list item group occupies one row in multi-column mode. Its child list items are arranged based on the **lanes** attribute of the list.<br>- If the value is set to {minLength, maxLength}, the number of columns is calculated based on the cross-axis width of the list item group. If the cross-axis width of the list item group is different from that of the list, the number of columns in the list item group may be different from that in the list.<br>This API is supported in ArkTS widgets. |
| lanes<sup>9+</sup> | number \| [LengthConstrain](ts-types.md#lengthconstrain) | In the following description, **listDirection** is set to **Axis.Vertical**:<br>Number of columns in which the list items are arranged along the cross axis.<br>Default value: **1**<br>The rules are as follows:<br>- If the value is set to a number, the column width is calculated by dividing the cross-axis width of the **\<List>** component by the specified number.<br>- If the value is set to {minLength, maxLength}, the number of columns is adjusted adaptively based on the width of the **\<List>** component, ensuring that the width respects the {minLength, maxLength} constraints during adaptation. The **minLength** constraint is prioritized.<br>- If the value is set to {minLength, maxLength}, and the cross-axis width constraint of the parent component is infinite, the parent component is arranged by column, and the column width is calculated based on the largest list item in the display area.<br>- Each list item group occupies one row in multi-column mode. Its child list items are arranged based on the **lanes** attribute of the list.<br>- If the value is set to {minLength, maxLength}, the number of columns is calculated based on the cross-axis width of the list item group. If the cross-axis width of the list item group is different from that of the list, the number of columns in the list item group may be different from that in the list.<br>This API is supported in ArkTS widgets.|
| alignListItem<sup>9+</sup> | [ListItemAlign](#listitemalign9) | Alignment mode of list items along the cross axis when: Cross-axis width of the **\<List>** component > Cross-axis width of list items x Value of **lanes**.<br>Default value: **ListItemAlign.Start**<br>This API is supported in ArkTS widgets.|
| sticky<sup>9+</sup> | [StickyStyle](#stickystyle9) | Whether to pin the header to the top or the footer to the bottom in the **\<ListItemGroup>** component. This attribute is used together with the **[\<ListItemGroup>](ts-container-listitemgroup.md)** component.<br>Default value: **StickyStyle.None**<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>The **sticky** attribute can be set to **StickyStyle.Header** or \| **StickyStyle.Footer** to support both the pin-to-top and pin-to-bottom features.|
......@@ -71,7 +71,7 @@ This API is supported in ArkTS widgets.
| ------ | -------------------------------------- |
| Start | The list items are packed toward the start edge of the **\<List>** component along the cross axis.|
| Center | The list items are centered in the **\<List>** component along the cross axis.|
| End | The list items are packed toward the end edge of the **\<List>** component in the cross axis.|
| End | The list items are packed toward the end edge of the **\<List>** component along the cross axis.|
## StickyStyle<sup>9+</sup>
......@@ -93,7 +93,7 @@ This API is supported in ArkTS widgets.
| -------- | -------- |
| onItemDelete<sup>(deprecated)</sup>(event: (index: number) => boolean) | Triggered when a list item is deleted.<br>This API is deprecated since API version 9.<br>- **index**: index of the deleted list item.|
| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | Triggered when the list scrolls.<br>- **scrollOffset**: scroll offset of each frame. The offset is positive when the list is scrolled up and negative when the list is scrolled down.<br>- **[scrollState](#scrollstate)**: current scroll state.<br>This event is not triggered when **ScrollEdge** and **ScrollToIndex** are called by using the controller. In other cases, this event is triggered when scrolling occurs.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onScrollIndex(event: (start: number, end: number) => void) | Triggered when a child component enters or exits from the list display area.<br>During index calculation, each **\<ListItemGroup>** component is taken as a whole and assigned an index, and the indexes of the list items within are not included in the calculation.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.<br>This event is triggered once when the list is initialized and when the index of the first list item or the next list item in the list display area changes.<br>When the list edge effect is the spring effect, the **onScrollIndex** event is not triggered when the user scrolls the list to the edge or releases the list to rebound.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onScrollIndex(event: (start: number, end: number) => void) | Triggered when a child component enters or leaves the list display area.<br>During index calculation, each **\<ListItemGroup>** component is taken as a whole and assigned an index, and the indexes of the list items within are not included in the calculation.<br>- **start**: index of the scroll start position.<br>- **end**: index of the scroll end position.<br>This event is triggered once when the list is initialized and when the index of the first list item or the next list item in the list display area changes.<br>When the list edge effect is the spring effect, the **onScrollIndex** event is not triggered when the user scrolls the list to the edge or releases the list to rebound.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onReachStart(event: () => void) | Triggered when the list reaches the start position.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This event is triggered once when **initialIndex** is **0** during list initialization and once when the list scrolls to the start position. When the list edge effect is the spring effect, this event is triggered once when the list passes the start position and is triggered again when the list returns to the start position.|
| onReachEnd(event: () => void) | Triggered when the list reaches the end position.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When the list edge effect is the spring effect, this event is triggered once when the list passes the end position and is triggered again when the list returns to the end position.|
| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the list starts to scroll. The input parameters indicate the amount by which the list will scroll. The event handler then works out the amount by which the list needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by, in vp.<br>\- **state**: current sliding status.<br>- **offsetRemain**: actual amount by which the list scrolls, in vp.<br>This event is triggered when the user starts dragging the list or the list starts inertial scrolling. This event is not triggered when the list rebounds or the scrolling controller is used.<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>If **listDirection** is set to **Axis.Vertical**, the return value is the amount by which the list needs to scroll in the vertical direction. If **listDirection** is set to **Axis.Horizontal**, the return value is the amount by which the list needs to scroll in the horizontal direction.|
......@@ -103,7 +103,7 @@ This API is supported in ArkTS widgets.
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | Triggered when a list element starts to be dragged.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the dragged list element.|
| onItemDragEnter(event: (event: ItemDragInfo) => void) | Triggered when the dragged item enters the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).|
| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | Triggered when the dragged item moves over the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.|
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | Triggered when the dragged item exits the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the list item.|
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | Triggered when the dragged item leaves the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: index of the list item.|
| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | Triggered when the dragged item is dropped on the drop target of the list.<br>- **event**: See [ItemDragInfo](ts-container-grid.md#itemdraginfo).<br>- **itemIndex**: initial position of the dragged item.<br>- **insertIndex**: index of the position to which the dragged item will be dropped.<br>- **isSuccess**: whether the dragged item is successfully dropped.<br>**NOTE**<br>During dragging across lists, **true** is returned if the drop target is bound to **onItemDrop**. Otherwise, **false** is returned. During dragging within a list, **isSuccess** is the return value of the **onItemMove** event.|
## ScrollState
......@@ -133,7 +133,7 @@ Since API version 9, this API is supported in ArkTS widgets.
> - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback.
## Example
## Example 1
```ts
// xxx.ets
......@@ -172,6 +172,9 @@ struct ListExample {
![en-us_image_0000001174264378](figures/en-us_image_0000001174264378.gif)
## Example 2
```ts
// xxx.ets
@Entry
......@@ -198,7 +201,6 @@ struct ListLanesExample {
}
.height(300)
.width("90%")
.editMode(true)
.border({ width: 3, color: Color.Red })
.lanes({ minLength: 40, maxLength: 40 })
.alignListItem(this.alignListItem)
......@@ -218,3 +220,57 @@ struct ListLanesExample {
```
![list](figures/list1.gif)
## Example 3
```ts
// xxx.ets
@Entry
@Component
struct ListExample{
@State arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State editFlag: boolean = false
build(){
Stack({alignContent: Alignment.TopStart}) {
Column(){
List({space:20, initialIndex:0}) {
ForEach(this.arr, (item, index) => {
ListItem() {
Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center}) {
Text('' + item)
.width('100%')
.height(80)
.fontSize(20)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
.flexShrink(1)
if (this.editFlag) {
Button() {
Text("delete").fontSize(16)
}.width('30%').height(40)
.onClick(() => {
console.info(this.arr[index] + 'Delete')
this.arr.splice(index, 1)
console.info(JSON.stringify(this.arr))
this.editFlag = false
}).stateEffect(true)
}
}
}
}, item => item)
}.width('90%')
}.width('100%')
Button('edit list')
.onClick(() => {
this.editFlag = !this.editFlag
}).margin({ top: 5, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
```
![list](figures/list3.gif)
en/application-dev/reference/arkui-ts/ts-container-waterflow.md
浏览文件 @ c5a9ffab
......@@ -14,6 +14,9 @@ The **\<WaterFlow>** component is a container that consists of cells formed by r
The [\<FlowItem>](ts-container-flowitem.md) child component is supported.
> **NOTE**
>
> When the **visibility** attribute of a child component in **\<WaterFlow >** is set to **None**, the child component is not displayed, but still takes up cells.
## APIs
......@@ -257,9 +260,11 @@ struct WaterflowDemo {
Text("N" + item).fontSize(12).height('16')
Image('res/waterFlowTest(' + item % 5 + ').jpg')
.objectFit(ImageFit.Fill)
.width('100%')
.layoutWeight(1)
}
}
.width(this.itemWidthArray[item])
.width('100%')
.height(this.itemHeightArray[item])
.backgroundColor(this.colors[item % 5])
}, item => item)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或