Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 6d65eaf5 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!11177 示例代码修改1031 

Merge pull request !11177 from luoying_ace/ly1024
上级 69b0caff be81bfb0
隐藏空白更改
内联 并排
Showing with 82 addition and 104 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md
浏览文件 @ 6d65eaf5
......@@ -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)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ 6d65eaf5
......@@ -23,7 +23,7 @@ ImageAnimator()
| 参数名称 | 参数类型 |参数描述 |
| ---------- | ----------------------- |-------- |
| images | Array&lt;[ImageFrameInfo](imageframeinfo对象说明)&gt; | 设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息，详见ImageFrameInfo属性说明。<br/>默认值：[] |
| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) |默认为初始状态，用于控制播放状态。<br/>默认值：AnimationStatus.Initial |
| state | [AnimationStatus](ts-appendix-enums.md#animationstatus) | 默认为初始状态，用于控制播放状态。<br/>默认值：AnimationStatus.Initial |
| duration | number | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中任意一帧图片设置了单独的duration后，该属性设置无效。<br/>默认值：1000 |
| reverse | boolean | 设置播放顺序。false表示从第1张图片播放到最后1张图片；&nbsp;true表示从最后1张图片播放到第1张图片。<br/>默认值：false |
| fixedSize | boolean | 设置图片大小是否固定为组件大小。&nbsp;true表示图片大小与组件大小一致，此时设置图片的width&nbsp;、height&nbsp;、top&nbsp;和left属性是无效的。false表示每一张图片的width&nbsp;、height&nbsp;、top和left属性都要单独设置。<br/>默认值：true |
......@@ -49,7 +49,7 @@ ImageAnimator()
| -------- | -------- |
| onStart(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 状态回调，动画开始播放时触发。 |
| onPause(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 状态回调，动画暂停播放时触发。 |
| onRepeat(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 状态回调，动画重新播放时触发。 |
| onRepeat(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 状态回调，动画重复播放时触发。 |
| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 状态回调，动画取消播放时触发。 |
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;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)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 6d65eaf5
# TextPicker
滚动选择文本的组件。
滑动选择文本内容的组件。
> **说明：**
>
......@@ -23,14 +23,14 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择列表。 |
| selected | number | 否 | 设置默认选中项在数组中的index值。<br/>默认值：0 |
| selected | number | 否 | 设置默认选中项在数组中的索引值。<br/>默认值：0 |
| value | string | 否 | 设置默认选中项的值，优先级低于selected。<br/>默认值：第一个元素值 |
## 属性
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| 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)
})
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md
浏览文件 @ 6d65eaf5
# 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)
zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md
浏览文件 @ 6d65eaf5
# 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)代替。
## 权限列表
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
浏览文件 @ 6d65eaf5
......@@ -14,21 +14,21 @@
| rotate | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;number \| string,<br/>centerY?:&nbsp;number \| string<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。<br>默认值:<br>{<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} |
| translate | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>z?&nbsp;:&nbsp;number \| string<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向。不支持百分比形式的输入。<br>默认值:<br>{<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>}|
| scale | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;number \| string,<br/>centerY?:&nbsp;number \| string<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。<br>默认值:<br>{<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} |
| 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)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或