!10530 示例代码1012

Merge pull request !10530 from luoying_ace/master

!10530 示例代码1012
Merge pull request !10530 from luoying_ace/master
662f35ef · openharmony_ci · Gitee · 91087e07 · 2a990639 · 662f35ef
5 changed file
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
 # TextArea

-可以输入多行文本并支持响应部分输入事件的组件。
+多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。

 >  **说明：**
 >
@@ -20,7 +20,7 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex

 | 参数名                     | 参数类型                                     | 必填   | 参数描述           |
 | ----------------------- | ---------------------------------------- | ---- | -------------- |
-| placeholder      | [ResourceStr](ts-types.md#resourcestr)  | 否    | 无输入时的提示文本。     |
+| placeholder      | [ResourceStr](ts-types.md#resourcestr)  | 否    | 设置无输入时的提示文本。     |
 | text             | [ResourceStr](ts-types.md#resourcestr)  | 否    | 设置输入框当前的文本内容。     |
 | controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否    | 设置TextArea控制器。 |

@@ -33,10 +33,10 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
 | ------------------------ | ---------------------------------------- | ---------------------------------------- |
 | placeholderColor         | [ResourceColor](ts-types.md#resourcecolor) | 设置placeholder文本颜色。                       |
 | placeholderFont          | [Font](ts-types.md#font) | 设置placeholder文本样式。                                    |
-| textAlign                | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本水平对齐式。<br/>默认值：TextAlign.Start |
+| textAlign                | [TextAlign](ts-appendix-enums.md#textalign) | 设置文本在输入框中的水平对齐式。<br/>默认值：TextAlign.Start |
 | caretColor               | [ResourceColor](ts-types.md#resourcecolor) | 设置输入框光标颜色。                               |
-| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>error?:&nbsp;(value:&nbsp;string) => void<br/>} | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
-| copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置文本是否可复制。 |
+| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>error?:&nbsp;(value:&nbsp;string) => void<br/>} | 通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。仅支持单个字符匹配，不支持字符串匹配。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被过滤的内容。 |
+| copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。 |


 ## 事件
@@ -45,14 +45,14 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex

 | 名称                                                         | 功能描述                                                     |
 | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入发生变化时，触发回调。                                   |
-| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发回调。<br/>- value：复制的文本内容。 |
-| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发回调。<br/>- value：剪切的文本内容。 |
-| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发回调。<br/>- value：粘贴的文本内容。 |
+| onChange(callback:&nbsp;(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 输入内容发生变化时，触发该回调。<br/>- value：当前输入的文本内容。    |
+| onCopy<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。<br/>- value：复制的文本内容。 |
+| onCut<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。<br/>- value：剪切的文本内容。 |
+| onPaste<sup>8+</sup>(callback:(value:&nbsp;string)&nbsp;=&gt;&nbsp;void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。<br/>- value：粘贴的文本内容。 |

 ## TextAreaController<sup>8+</sup>

-TextArea组件的控制器，通过它操作TextArea组件。
+TextArea组件的控制器，目前可通过它设置TextArea组件的光标位置。

 ### 导入对象

@@ -75,63 +75,32 @@ caretPosition(value: number): void

 ## 示例

-
-### 多行文本输入
-
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct TextAreaExample1 {
-  controller: TextAreaController = new TextAreaController()
+struct TextAreaExample {
  @State text: string = ''
+  controller: TextAreaController = new TextAreaController()
+
  build() {
    Column() {
-      TextArea({ placeholder: 'input your word', controller: this.controller})
-        .placeholderColor("rgb(0,0,225)")
-        .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
-        .textAlign(TextAlign.Center)
-        .caretColor(Color.Blue)
-        .height(50)
-        .fontSize(30)
-        .fontWeight(FontWeight.Bold)
-        .fontFamily("sans-serif")
-        .fontStyle(FontStyle.Normal)
-        .fontColor(Color.Red)
-        .inputFilter('^[\u4E00-\u9FA5A-Za-z0-9_]+$',(value: string) => {
-          console.info("hyb"+value)
-        })
+      TextArea({ placeholder: 'input your word', controller: this.controller })
+        .placeholderFont({ size: 14, weight: 400 })
+        .width(400)
+        .margin(20)
+        .fontSize(14)
        .onChange((value: string) => {
          this.text = value
-          this.controller.caretPosition(-1)
        })
-      Text(this.text).width('90%')
-    }
-  }
-}
-```
-
-![zh-cn_image_0000001251087311](figures/zh-cn_image_0000001251087311.gif)
-
-
-### 设置光标
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct TextAreaExample2 {
-    controller: TextAreaController = new TextAreaController()
-    build() {
-        Column() {
-            TextArea({ placeholder: 'input your word',controller:this.controller })
-            Button('caretPosition')
+      Text(this.text)
+      Button('Set caretPosition 1')
+        .margin(15)
        .onClick(() => {
-                    this.controller.caretPosition(4)
+          // 设置光标位置到第一个字符后
+          this.controller.caretPosition(1)
        })
-          }
+    }.width('100%')
  }
 }
 ```
-
-![zh-cn_image_0000001252653499](figures/zh-cn_image_0000001252653499.png)
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
@@ -59,13 +59,6 @@ SideBarContainer( type?: SideBarContainerType )
 | Start | 侧边栏位于容器左侧。 |
 | End | 侧边栏位于容器右侧。 |

-## SideBarPosition<sup>9+</sup>枚举说明
-
-| 名称 | 描述 |
-| -------- | -------- |
-| Start | 侧边栏位于容器左侧。 |
-| End | 侧边栏位于容器右侧。 |
-
 ## 事件

 | 名称 | 功能描述 |

--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md
 # 日期滑动选择器弹窗

-根据指定范围的Date创建可以选择日期的滑动选择器，展示在弹窗上。
+根据指定的日期范围创建日期滑动选择器，展示在弹窗上。

 >  **说明：**
+>
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。


-## 权限列表
-
-无
-
 ## DatePickerDialog.show

 show(options?: DatePickerDialogOptions)
@@ -17,37 +14,37 @@ show(options?: DatePickerDialogOptions)
 定义日期滑动选择器弹窗并弹出。

 - DatePickerDialogOptions参数说明
+
  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
  | -------- | -------- | -------- | -------- | -------- |
-  | start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
-  | end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
-  | selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
-  | lunar | boolean | 否 | false | 日期是否显示农历。 |
-  | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
-  | onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
-  | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 |
+  | start | Date | 否 | Date('1970-1-1') | 设置选择器的起始日期。 |
+  | end | Date | 否 | Date('2100-12-31') | 设置选择器的结束日期。 |
+  | selected | Date | 否 | 当前系统日期 | 设置当前选中的日期。 |
+  | lunar | boolean | 否 | false | 日期是否显示为农历。 |确定
+  | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 点击弹窗中的“确定”按钮时触发该回调。 |
+  | onCancel | () => void | 否 | - | 点击弹窗中的“取消”按钮时触发该回调。 |
+  | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。 |

 ## 示例

-### 日期滑动选择器（显示农历）示例
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct DatePickerDialogExample01 {
-  @State isLunar: boolean = true
-  selectedDate: Date = new Date("2000-1-1")
+struct DatePickerDialogExample {
+  selectedDate: Date = new Date("2010-1-1")

  build() {
-    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.Center }) {
-      Button("DatePickerDialog").onClick(() => {
+    Column() {
+      Button("DatePickerDialog")
+        .margin(20)
+        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
-          end: new Date("2005-1-1"),
+            end: new Date("2100-12-31"),
            selected: this.selectedDate,
-          lunar: this.isLunar,
            onAccept: (value: DatePickerResult) => {
+              // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
              this.selectedDate.setFullYear(value.year, value.month, value.day)
              console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
            },
@@ -59,28 +56,15 @@ struct DatePickerDialogExample01 {
            }
          })
        })
-    }
-  }
-}
-```
-### 日期滑动选择器（不显示农历）示例
-```ts
-// xxx.ets
-@Entry
-@Component
-struct DatePickerDialogExample02 {
-  @State isLunar: boolean = false
-  selectedDate: Date = new Date("2000-1-1")

-  build() {
-    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.Center }) {
-      Button("DatePickerDialog").onClick(() => {
+      Button("Lunar DatePickerDialog")
+        .margin(20)
+        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
-          end: new Date("2005-1-1"),
+            end: new Date("2100-12-31"),
            selected: this.selectedDate,
-          lunar: this.isLunar,
+            lunar: true,
            onAccept: (value: DatePickerResult) => {
              this.selectedDate.setFullYear(value.year, value.month, value.day)
              console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
@@ -93,7 +77,7 @@ struct DatePickerDialogExample02 {
            }
          })
        })
-    }
+    }.width('100%')
  }
 }
 ```
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md
@@ -3,13 +3,10 @@
 根据指定的选择范围创建文本选择器，展示在弹窗上。

 >  **说明：**
+>
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。


-## 权限列表
-
-无
-
 ## TextPickerDialog.show

 show(options?: TextPickerDialogOptions)
@@ -17,21 +14,23 @@ show(options?: TextPickerDialogOptions)
 定义文本滑动选择器弹窗并弹出。

 - TextPickerDialogOptions参数说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | range | string[]&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 | - | 选择器的数据选择范围。 |
-  | selected | number | 否 | 0 | 选中项在数组中的index值。 |
-  | value       | string           | 否    | -    | 选中项文本值。当设置了selected参数时，该值不生效。如果该值不在range范围内，则默认取range第一个元素。|
-  | defaultPickerItemHeight | number \| string | 否 | - | 默认Picker内容项元素高度。 |
-  | onAccept | (value: TextPickerResult) => void | 否 | - | 点击弹窗中确定按钮时触发。 |
-  | onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |
-  | onChange | (value: TextPickerResult) => void | 否 | - | 滑动选择器，当前选择项改变时触发。 |
+
+  | 参数名 | 参数类型 | 必填 |  参数描述 |
+  | -------- | -------- | -------- |  -------- |
+  | range | string[]&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是 |  设置文本选择器的选择范围。 |
+  | selected | number | 否 |  设置选中项的索引值。<br>默认值：0 |
+  | value       | string           | 否    | 设置选中项的文本内容。当设置了selected参数时，该参数不生效。如果设置的value值不在range范围内，则默认取range第一个元素。|
+  | defaultPickerItemHeight | number \| string | 否 | 设置选择器中选项的高度。 |
+  | onAccept | (value: TextPickerResult) => void | 否 |  点击弹窗中的“确定”按钮时触发该回调。 |
+  | onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
+  | onChange | (value: TextPickerResult) => void | 否 |  滑动弹窗中的选择器使当前选中项改变时触发该回调。 |

 - TextPickerResult对象说明
-  | 名称 | 参数类型 | 描述 | 
+
+  | 名称 | 类型 | 描述 | 
  | -------- | -------- | -------- |
-  | value | string | 选中项文本。 | 
-  | index | number | 选中项在数组中的index值。 | 
+  | value | string | 选中项的文本内容。 | 
+  | index | number | 选中项在选择范围数组中的索引值。 | 

 ## 示例

@@ -40,19 +39,21 @@ show(options?: TextPickerDialogOptions)
 @Entry
 @Component
 struct TextPickerDialogExample {
-  @State select: number = 1
-  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
+  @State select: number = 2
+  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']

  build() {
-    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.Center }) {
-      Button("TextPickerDialog").onClick(() => {
+    Column() {
+      Button("TextPickerDialog")
+        .margin(20)
+        .onClick(() => {
          TextPickerDialog.show({
            range: this.fruits,
            selected: this.select,
            onAccept: (value: TextPickerResult) => {
-            console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
+              // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
              this.select = value.index
+              console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
            },
            onCancel: () => {
              console.info("TextPickerDialog:onCancel()")
@@ -62,7 +63,7 @@ struct TextPickerDialogExample {
            }
          })
        })
-    }
+    }.width('100%')
  }
 }
 ```
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
 # 时间滑动选择器弹窗

-默认以00：00至23：59的时间区间创建滑动选择器，展示在弹窗上。
+以24小时的时间区间创建时间滑动选择器，展示在弹窗上。

 >  **说明：**
+>
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

 ## TimePickerDialog.show
@@ -11,34 +12,35 @@ show(options?: TimePickerDialogOptions)

 定义时间滑动选择器弹窗并弹出。

- options参数
+- TimePickerDialogOptions参数
+
  | 参数名 | 参数类型 | 必填 | 参数描述 |
  | -------- | -------- | -------- | -------- |
-  | selected | Date | 否 | 设置选中项的时间。<br/>默认值：当前系统时间 |
-  | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制。<br/>默认值：false |
-  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中确定按钮时触发。 |
-  | onCancel | () => void | 否 | 点击弹窗中取消按钮时触发。 |
-  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动选择器，当前选择项改变时触发。 |
+  | selected | Date | 否 | 设置当前选中的时间。<br/>默认值：当前系统时间 |
+  | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制，默认为12小时制。<br/>默认值：false |
+  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
+  | onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
+  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中时间改变时触发该回调。 |

 ## 示例

-### 时间滑动选择器（24小时制）示例
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct TimePickerDialogExample01 {
-  @State isUseMilitaryTime: boolean = true;
-  private selectTime: Date = new Date('7/22/2022 12:45:00');
+struct TimePickerDialogExample {
+  private selectTime: Date = new Date('2020-12-25T08:30:00')

  build() {
-    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.Center }) {
-      Button("TimePickerDialog").onClick(() => {
+    Column() {
+      Button("TimePickerDialog 12小时制")
+        .margin(20)
+        .onClick(() => {
          TimePickerDialog.show({
-          selected:this.selectTime,  
-          useMilitaryTime: this.isUseMilitaryTime,
+            selected: this.selectTime,
            onAccept: (value: TimePickerResult) => {
+              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
+              this.selectTime.setHours(value.hour, value.minute)
              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
            },
            onCancel: () => {
@@ -49,29 +51,15 @@ struct TimePickerDialogExample01 {
            }
          })
        })
-    }
-  }
-}
-```
- ![zh-cn_image_0000001118642010](figures/zh-cn_image_0000001118642010.gif) 
-
-### 时间滑动选择器（12小时制）示例
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct TimePickerDialogExample02 {
-  @State isUseMilitaryTime: boolean = false;
-
-  build() {
-    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.Center }) {
-      Button("TimePickerDialog").onClick(() => {
+      Button("TimePickerDialog 24小时制")
+        .margin(20)
+        .onClick(() => {
          TimePickerDialog.show({
-          useMilitaryTime: this.isUseMilitaryTime,
+            selected: this.selectTime,
+            useMilitaryTime: true,
            onAccept: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
+              this.selectTime.setHours(value.hour, value.minute)
+              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()");
@@ -81,9 +69,7 @@ struct TimePickerDialogExample02 {
            }
          })
        })
-    }
+    }.width('100%')
  }
 }
 ```
\ No newline at end of file
-
- ![zh-cn_image_0000001118642020](figures/zh-cn_image_0000001118642020.gif) 
\ No newline at end of file