diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index defe3b04193661870318afbc1c0980928c3bad33..7437c6f33f8f96175ee6e81101ebe75d08cf09f1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -7,10 +7,6 @@ > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - - - ## 子组件 无 @@ -55,58 +51,34 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ## 示例 -### 日期选择器（显示农历） - ```ts // xxx.ets @Entry @Component -struct DatePickerExample01 { +struct DatePickerExample { + @State isLunar: boolean = false private selectedDate: Date = new Date('2021-08-08') build() { Column() { + Button('切换公历农历') + .margin({ top: 30 }) + .onClick(() => { + this.isLunar = !this.isLunar + }) DatePicker({ start: new Date('1970-1-1'), end: new Date('2100-1-1'), selected: this.selectedDate, }) - .lunar(true) - .onChange((date: DatePickerResult) => { - console.info('select current date is: ' + JSON.stringify(date)) - }) - }.width('100%') - } -} -``` - -![zh-cn_image_0000001251279761](figures/zh-cn_image_0000001251279761.gif) - - -### 日期选择器（不显示农历） - -```ts -// xxx.ets -@Entry -@Component -struct DatePickerExample02 { - private selectedDate: Date = new Date('2021-08-08') + .lunar(this.isLunar) + .onChange((value: DatePickerResult) => { + this.selectedDate.setFullYear(value.year, value.month, value.day) + console.info('select current date is: ' + JSON.stringify(value)) + }) - 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%') } } ``` -![zh-cn_image_0000001251092975](figures/zh-cn_image_0000001251092975.gif) - diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md index 37f7c25716f2de0c46e17ae1d99b94e6ab50b368..d53835eadcd4162b1fffcd075e9d504d3e874927 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md @@ -23,7 +23,7 @@ ImageAnimator() | 参数名称 | 参数类型 |参数描述 | | ---------- | ----------------------- |-------- | | images | Array<[ImageFrameInfo](imageframeinfo对象说明)> | 设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息，详见ImageFrameInfo属性说明。
默认值：[] | -| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) |默认为初始状态，用于控制播放状态。
默认值：AnimationStatus.Initial | +| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | 默认为初始状态，用于控制播放状态。
默认值：AnimationStatus.Initial | | duration | number | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中任意一帧图片设置了单独的duration后，该属性设置无效。
默认值：1000 | | reverse | boolean | 设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。
默认值：false | | fixedSize | boolean | 设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。
默认值：true | @@ -49,7 +49,7 @@ ImageAnimator() | -------- | -------- | | onStart(event: () => void) | 状态回调，动画开始播放时触发。 | | onPause(event: () => void) | 状态回调，动画暂停播放时触发。 | -| onRepeat(event: () => void) | 状态回调，动画重新播放时触发。 | +| onRepeat(event: () => void) | 状态回调，动画重复播放时触发。 | | onCancel(event: () => void) | 状态回调，动画取消播放时触发。 | | onFinish(event: () => void) | 状态回调，动画播放完成时触发。 | @@ -66,47 +66,46 @@ struct ImageAnimatorExample { @State iterations: number = 1 build() { - Column({ space:5 }) { + Column({ space: 10 }) { ImageAnimator() .images([ - { - // comment文件夹与pages同级 - 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(() => { // 当帧动画开始播放后触发 + .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240) + .margin({ top: 100 }) + .onStart(() => { console.info('Start') }) .onPause(() => { @@ -118,35 +117,34 @@ struct ImageAnimatorExample { .onCancel(() => { console.info('Cancel') }) - .onFinish(() => { // 当帧动画播放完成后触发 - 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 // 显示当前帧图片 + }).margin(5) Button('stop').width(100).padding(5).onClick(() => { - this.state = AnimationStatus.Stopped - }) + this.state = AnimationStatus.Stopped // 显示动画的起始帧图片 + }).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 // 无限循环播放 + }).margin(5) } - }.width('100%').height('100%').backgroundColor(0xF1F3F5) + }.width('100%').height('100%') } } ``` -![zh-cn_image_0000001219662643](figures/zh-cn_image_0000001219662643.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md index feea880eb6a5486c8bbf2263ecfdc93bcb520ed6..6a85cfa4b5e25080a61ffabfb1bcc05660b802bd 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md @@ -1,6 +1,6 @@ # TextPicker -滚动选择文本的组件。 +滑动选择文本内容的组件。 > **说明：** > @@ -23,14 +23,14 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin | 参数名 | 参数类型 | 必填 | 参数描述 | | -------- | -------- | -------- | -------- | | range | string[] \| [Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择列表。 | -| selected | number | 否 | 设置默认选中项在数组中的index值。
默认值：0 | +| selected | number | 否 | 设置默认选中项在数组中的索引值。
默认值：0 | | value | string | 否 | 设置默认选中项的值，优先级低于selected。
默认值：第一个元素值 | ## 属性 | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| defaultPickerItemHeight | number \| string | 默认Picker内容项元素高度。 | +| defaultPickerItemHeight | number \| string | 设置Picker各选择项的高度。 | ## 事件 @@ -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) }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md index 13855a9815cc2ab0ba23ca1e3b0c5c02c2cc8d62..5fe82d03d5c5180727483648a4882153c6812322 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md @@ -1,6 +1,6 @@ # TimePicker -滚动选择时间的组件。 +滑动选择时间的组件。 > **说明：** > @@ -16,7 +16,7 @@ TimePicker(options?: {selected?: Date}) -默认以00:00至23:59的时间区间创建滑动选择器。 +默认以24小时的时间区间创建滑动选择器。 **参数：** @@ -55,20 +55,25 @@ TimePicker(options?: {selected?: Date}) @Entry @Component struct TimePickerExample { + @State isMilitaryTime: boolean = false private selectedTime: Date = new Date('2022-07-22T08:00:00') build() { Column() { + Button('切换12小时制/24小时制') + .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%') } } ``` - -![zh-cn_image_0000001251292933](figures/zh-cn_image_0000001251292933.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md index 7dbc84e4eb1c0b9cf3e0165503d8e95c8efa3f1a..1dfbaaab730dc3fb5b98040b5a75af0c0a304f50 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md @@ -1,10 +1,10 @@ # Flex -应用弹性方式布局子组件的容器组件。 +以弹性方式布局子组件的容器组件。 > **说明：** > - 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -> - Flex组件在设置flexShrink、flexGrow时存在二次布局过程，因此在对性能有严格要求的场景下建议使用[Column](ts-container-column.md)、[Row](ts-container-row.md)代替。 +> - Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用[Column](ts-container-column.md)、[Row](ts-container-row.md)代替。 ## 权限列表 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md index e80e0321700b9827646268fb4042630ba7b5ef0b..47ecb3066a940d21d3bab7fab265a8b3e71a4aed 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md @@ -14,21 +14,21 @@ | rotate | {
x?: number,
y?: number,
z?: number,
angle?: Angle,
centerX?: number \| string,
centerY?: number \| string
} | (x, y, z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。
默认值:
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
} | | translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向。不支持百分比形式的输入。
默认值:
{
x: 0,
y: 0,
z: 0
}| | scale | {
x?: number,
y?: number,
z?: number,
centerX?: number \| string,
centerY?: number \| string
} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。
默认值:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
} | -| transform | Matrix4Transit | 设置当前组件的变换矩阵。 | +| transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | 设置当前组件的变换矩阵。 | ## 示例 ```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, @@ -37,26 +37,29 @@ struct TransformExample { centerX: '50%', centerY: '50%', angle: 300 - }) // 组件以(1,1,1)为旋转轴，中心点顺时针旋转 300度 + }) // 组件以矢量(1,1,1)为旋转轴，绕中心点顺时针旋转300度 .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 }) // x轴平移100，y轴平移5 - .width(100).height(100).backgroundColor(0xAFEEEE).margin({bottom:10}) + .translate({ x: 100, y: 10 }) // x轴方向平移100，y轴方向平移10 + .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 }) // 高度缩小一倍，宽度放大一倍，z轴在2D下无效果 .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 }) } } ``` - -![zh-cn_image_0000001219864137](figures/zh-cn_image_0000001219864137.png)