!11177 示例代码修改1031

Merge pull request !11177 from luoying_ace/ly1024

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)
-

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md

@@ -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

 # TextPicker
 
-滚动选择文本的组件。
+滑动选择文本内容的组件。
 
 >  **说明：**
 >
@@ -23,14 +23,14 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin
 | 参数名 | 参数类型 | 必填 | 参数描述 |
 | -------- | -------- | -------- | -------- |
 | range | string[] \| [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

 # 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

 # 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

@@ -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)