Skip to content

D
Docs

OpenHarmony / Docs
11 个月 前同步成功

通知 158
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 bc974655 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (11177) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 4b4f0f9c
隐藏空白更改
内联 并排
Showing with 118 addition and 130 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ bc974655
......@@ -7,8 +7,6 @@ The **\<DatePicker>** component allows users to select a date from the given ran
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
Not supported
......@@ -32,14 +30,14 @@ Creates a date picker in the given date range.
| Name | Type | Description |
| ------| -------------- | -------- |
| lunar | boolean | Whether to display the lunar calendar.<br>-&nbsp;**true**: Display the lunar calendar.<br>-&nbsp;**false**: Do not display the lunar calendar.<br>Default value: **false**|
| lunar | boolean | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.<br>Default value: **false**|
## Events
| Name| Description|
| -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | Triggered when a date is selected.|
| onChange(callback: (value: DatePickerResult) =&gt; void) | Triggered when a date is selected.|
## DatePickerResult
......@@ -53,55 +51,35 @@ Creates a date picker in the given date range.
## Example
### Date Picker Sample Code (With Lunar Calendar)
```ts
// xxx.ets
@Entry
@Component
struct DatePickerExample01 {
struct DatePickerExample {
@State isLunar: boolean = false
private selectedDate: Date = new Date('2021-08-08')
build() {
Column() {
Button('Switch Calendar')
.margin({ top: 30 })
.onClick(() => {
this.isLunar = !this.isLunar
})
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedDate,
selected: this.selectedDate
})
.lunar(true)
.onChange((date: DatePickerResult) => {
console.info('select current date is: ' + JSON.stringify(date))
})
}.width('100%')
}
}
```
.lunar(this.isLunar)
.onChange((value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info('select current date is: ' + JSON.stringify(value))
})
### Date Picker Sample Code (No Lunar Calendar)
```ts
// xxx.ets
@Entry
@Component
struct DatePickerExample02 {
private selectedDate: Date = new Date('2021-08-08')
build() {
Column() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedDate,
})
.lunar(false)
.onChange((date: DatePickerResult) => {
console.info('select current date is: ' + JSON.stringify(date))
})
}.width('100%')
}
}
```
![en-us_image_0000001251092975](figures/en-us_image_0000001251092975.png)
![datePicker](figures/datePicker.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ bc974655
......@@ -6,8 +6,6 @@ The **\<ImageAnimator>** component enables images to be played frame by frame. T
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
Not supported
......@@ -20,26 +18,26 @@ ImageAnimator()
## Attributes
| Name | Type | Mandatory | Description |
| ---------- | ----------------------- | -------- | -------- |
| images | Array&lt;ImageFrameInfo&gt; | No | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.<br>Default value: **[]** |
| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | No | Playback status of the animation. The default status is **Initial**.<br>Default value: **AnimationStatus.Initial**|
| duration | number | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.<br>Default value: **1000**|
| reverse | boolean | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.<br>Default value: **false**|
| fixedSize | boolean | No | Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.<br>Default value: **true**|
| preDecode | number | No | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.<br>Default value: **0**|
| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | No | Status before and after the animation starts. For details about the options, see **FillMode**.<br>Default value: **FillMode.Forwards**|
| iterations | number | No | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
| Name | Type |Description |
| ---------- | ----------------------- |-------- |
| images | Array&lt;[ImageFrameInfo](#imageframeinfo)&gt; | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.<br>Default value: **[]**<br>**NOTE**<br>Dynamic update is not supported.|
| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | Playback status of the animation. The default status is **Initial**.<br>Default value: **AnimationStatus.Initial**|
| duration | number | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.<br>Default value: **1000**|
| reverse | boolean | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.<br>Default value: **false**|
| fixedSize | boolean | Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.<br>Default value: **true**|
| preDecode | number | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.<br>Default value: **0**|
| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Status before and after the animation starts. For details about the options, see **FillMode**.<br>Default value: **FillMode.Forwards**|
| iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
- ImageFrameInfo
## ImageFrameInfo
| Name | Type | Mandatory| Description|
| -------- | -------------- | -------- | -------- |
| src | string \| [Resource](ts-types.md#resource)<sup>9+</sup> | Yes | Image path. The image format can be .svg, .png, or .jpg. Since API version 9, this attribute accepts paths of the [Resource](ts-types.md#resource) type.|
| width | [Length](ts-types.md#length) | No | Image width.<br>Default value: **0** |
| height | [Length](ts-types.md#length) | No | Image height.<br>Default value: **0** |
| top | [Length](ts-types.md#length) | No | Vertical coordinate of the image relative to the upper left corner of the widget<br>Default value: **0** |
| left | [Length](ts-types.md#length) | No | Horizontal coordinate of the image relative to the upper left corner of the widget<br>Default value: **0** |
| width | number \| string | No | Image width.<br>Default value: **0** |
| height | number \| string | No | Image height.<br>Default value: **0** |
| top | number \| string | No | Vertical coordinate of the image relative to the upper left corner of the widget<br>Default value: **0** |
| left | number \| string | No | Horizontal coordinate of the image relative to the upper left corner of the widget<br>Default value: **0** |
| duration | number | No | Playback duration of each image frame, in milliseconds.<br>Default value: **0** |
......@@ -47,11 +45,11 @@ ImageAnimator()
| Name| Description|
| -------- | -------- |
| onStart(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation starts to play.|
| onPause(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is paused.|
| onRepeat(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is repeated.|
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is canceled.|
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is complete.|
| onStart(event: () =&gt; void) | Triggered when the animation starts to play.|
| onPause(event: () =&gt; void) | Triggered when the animation playback is paused.|
| onRepeat(event: () =&gt; void) | Triggered when the animation playback is repeated.|
| onCancel(event: () =&gt; void) | Triggered when the animation playback is canceled.|
| onFinish(event: () =&gt; void) | Triggered when the animation playback is complete.|
## Example
......@@ -66,47 +64,46 @@ struct ImageAnimatorExample {
@State iterations: number = 1
build() {
Column({ space:5 }) {
Column({ space: 10 }) {
ImageAnimator()
.images([
{
// The comment folder is at the same level as the pages folder.
src: '/comment/bg1.jpg',
{
src: $r('app.media.img1'),
duration: 500,
width: 325,
height: 200,
width: 170,
height: 120,
top: 0,
left: 0
},
{
src: '/comment/bg2.jpg',
src: $r('app.media.img2'),
duration: 500,
width: 325,
height: 200,
width: 170,
height: 120,
top: 0,
left: 0
left: 170
},
{
src: $r('app.media.bg3'),
src: $r('app.media.img3'),
duration: 500,
width: 325,
height: 200,
top: 0,
left: 0
width: 170,
height: 120,
top: 120,
left: 170
},
{
src: $rawfile('bg4.jpg'),
src: $r('app.media.img4'),
duration: 500,
width: 325,
height: 200,
top: 0,
width: 170,
height: 120,
top: 120,
left: 0
}
])
.state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2)
.fillMode(FillMode.None).iterations(this.iterations).width(325).height(210)
.margin({top:100})
.onStart(() => { // Triggered when the frame animation playback starts.
.fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
.margin({ top: 100 })
.onStart(() => {
console.info('Start')
})
.onPause(() => {
......@@ -118,35 +115,35 @@ struct ImageAnimatorExample {
.onCancel(() => {
console.info('Cancel')
})
.onFinish(() => { // Triggered after the frame animation playback is complete.
this.state = AnimationStatus.Stopped
.onFinish(() => {
console.info('Finish')
})
Row() {
Button('start').width(100).padding(5).onClick(() => {
this.state = AnimationStatus.Running
})
}).margin(5)
Button('pause').width(100).padding(5).onClick(() => {
this.state = AnimationStatus.Paused
})
this.state = AnimationStatus.Paused // Display the image of the current frame.
}).margin(5)
Button('stop').width(100).padding(5).onClick(() => {
this.state = AnimationStatus.Stopped
})
this.state = AnimationStatus.Stopped // Display the image of the initial frame.
}).margin(5)
}
Row() {
Button('reverse').width(100).padding(5).onClick(() => {
this.reverse = !this.reverse
})
}).margin(5)
Button('once').width(100).padding(5).onClick(() => {
this.iterations = 1
})
Button('iteration').width(100).padding(5).onClick(() => {
this.iterations = -1
})
}).margin(5)
Button('infinite').width(100).padding(5).onClick(() => {
this.iterations = -1 // The animation is played for an unlimited number of times.
}).margin(5)
}
}.width('100%').height('100%').backgroundColor(0xF1F3F5)
}.width('100%').height('100%')
}
}
```
![en-us_image_0000001211898470](figures/en-us_image_0000001211898470.gif)
![imageAnimator](figures/imageAnimator.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ bc974655
# TextPicker
The **TextPicker** component allows users to scroll to select text.
The **\<TextPicker>** component allows users to scroll to select text.
> **NOTE**
>
......@@ -23,14 +23,14 @@ Creates a text picker based on the selection range specified by **range**.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| range | string[] \| [Resource](ts-types.md#resource)| Yes| Data selection range of the picker.|
| selected | number | No| Index of the selected item in the range.<br>Default value: **0**|
| value | string | No| Value of the selected item. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item|
| selected | number | No| Index of the default item in the range.<br>Default value: **0**|
| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item|
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| defaultPickerItemHeight | number \| string | Default height of an item in the picker.|
| defaultPickerItemHeight | number \| string | Height of each item in the picker.|
## Events
......@@ -53,7 +53,7 @@ struct TextPickerExample {
build() {
Column() {
TextPicker({range: this.fruits, selected: this.select})
TextPicker({ range: this.fruits, selected: this.select })
.onChange((value: string, index: number) => {
console.info('Picker item changed, value: ' + value + ', index: ' + index)
})
......
en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ bc974655
......@@ -16,7 +16,7 @@ Not supported
TimePicker(options?: {selected?: Date})
Creates a time picker whose default time range is from 00:00 to 23:59.
Creates a time picker, which is in 24-hour format by default.
**Parameters**
......@@ -38,7 +38,8 @@ Creates a time picker whose default time range is from 00:00 to 23:59.
| ---------------------------------------- | ----------- |
| onChange(callback: (value: TimePickerResult ) =&gt; void) | Triggered when a time is selected.|
### TimePickerResult
## TimePickerResult
| Name | Type | Description |
| ------ | ------ | ------- |
| hour | number | Hour portion of the selected time.|
......@@ -55,20 +56,27 @@ Creates a time picker whose default time range is from 00:00 to 23:59.
@Entry
@Component
struct TimePickerExample {
@State isMilitaryTime: boolean = false
private selectedTime: Date = new Date('2022-07-22T08:00:00')
build() {
Column() {
Button ('Switch Time Format')
.margin({ top: 30 })
.onClick(() => {
this.isMilitaryTime = !this.isMilitaryTime
})
TimePicker({
selected: this.selectedTime,
})
.useMilitaryTime(true)
.onChange((date: TimePickerResult) => {
console.info('select current date is: ' + JSON.stringify(date))
})
.useMilitaryTime(this.isMilitaryTime)
.onChange((value: TimePickerResult) => {
this.selectedTime.setHours(value.hour, value.minute)
console.info('select current date is: ' + JSON.stringify(value))
})
}.width('100%')
}
}
```
![en-us_image_0000001251292933](figures/en-us_image_0000001251292933.gif)
![timePicker](figures/timePicker.gif)
en/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ bc974655
# Flex
The **\<Flex>** component allows for elastic layout of child components.
The **\<Flex>** component allows for flexible layout of child components.
> **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - The **\<Flex>** component adapts the layout of flex items to comply with the **flexShrink** and **flexGrow** settings. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
> - The **\<Flex>** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
## Required Permissions
......@@ -14,7 +14,7 @@ None
## Child Components
This component can contain child components.
Supported
## APIs
......@@ -30,7 +30,7 @@ Creates a standard **\<Flex>** component.
| wrap | [FlexWrap](ts-appendix-enums.md#flexwrap) | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
| justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign) | No | ItemAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
| alignContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
## Example
......@@ -148,7 +148,7 @@ struct FlexExample2 {
// xxx.ets
@Component
struct JustifyContentFlex {
@Prop justifyContent : number
justifyContent : number
build() {
Flex({ justifyContent: this.justifyContent }) {
......@@ -197,7 +197,7 @@ struct FlexExample3 {
// xxx.ets
@Component
struct AlignItemsFlex {
@Prop alignItems : number
alignItems : number
build() {
Flex({ alignItems: this.alignItems }) {
......@@ -246,7 +246,7 @@ struct FlexExample4 {
// xxx.ets
@Component
struct AlignContentFlex {
@Prop alignContent: number
alignContent: number
build() {
Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
浏览文件 @ bc974655
......@@ -9,26 +9,26 @@ Transformation attributes allow you to rotate, translate, scale, or transform a
## Attributes
| Name | Type | Description |
| --------- | ------------------------------------------------------------------------ | ---------------------------------------- |
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0,<br>angle: 0,<br>centerX: '50%',<br>centerY: '50%'<br>} |
| translate | {<br>x?: number \| string,<br>y?: number \| string,<br>z? : number \| string<br>} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0<br>}|
| scale | {<br>x?: number,<br>y?: number,<br>z?: number,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Scale ratio of the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.<br>Default value:<br>{<br>x: 1,<br>y: 1,<br>z: 1,<br>centerX:'50%',<br>centerY:'50%'<br>} |
| transform | Matrix4Transit | Transformation matrix of the component. |
| Name | Type | Description |
| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0,<br>angle: 0,<br>centerX: '50%',<br>centerY: '50%'<br>} |
| translate | {<br>x?: number \| string,<br>y?: number \| string,<br>z? : number \| string<br>} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0<br>} |
| scale | {<br>x?: number,<br>y?: number,<br>z?: number,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Scale ratio along the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.<br>Default value:<br>{<br>x: 1,<br>y: 1,<br>z: 1,<br>centerX:'50%',<br>centerY:'50%'<br>} |
| transform | Matrix4Transit | Transformation matrix of the component. |
## Example
```ts
// xxx.ets
import Matrix4 from '@ohos.matrix4'
import matrix4 from '@ohos.matrix4'
@Entry
@Component
struct TransformExample {
build() {
Column() {
Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
Row()
.rotate({
x: 1,
......@@ -40,23 +40,28 @@ struct TransformExample {
}) // The component rotates around the center point of the rotation axis (1,1,1) clockwise by 300 degrees.
.width(100).height(100).backgroundColor(0xAFEEEE)
Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(30)
Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)
Row()
.translate({ x: 100, y: 5 }) // The component translates by 100 along the x-axis and by 5 along the y-axis.
.width(100).height(100).backgroundColor(0xAFEEEE).margin({bottom:10})
.translate({ x: 100, y: 10 }) // The component translates by 100 along the x-axis and by 10 along the y-axis.
.width(100).height(100).backgroundColor(0xAFEEEE).margin({ bottom: 10 })
Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
Row()
.scale({ x: 2, y: 0.5}) // The height and width are doubled. The z-axis has no effect in 2D mode.
.width(100).height(100).backgroundColor(0xAFEEEE)
Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
Row()
.width(100).height(100).backgroundColor(0xAFEEEE)
.transform(Matrix4.identity().translate({ x: 100, y: 100, z: 30 }))
.transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({
x: 0,
y: 0,
z: 1,
angle: 60
}))
}.width('100%').margin({ top: 5 })
}
}
```
![en-us_image_0000001257058401](figures/en-us_image_0000001257058401.png)
![transform](figures/transform.PNG)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或