!16964 文档整改

Merge pull request !16964 from 田雨/master

zh-cn/application-dev/reference/apis/js-apis-router.md

@@ -395,7 +395,7 @@ back(options?: RouterOptions ): void
 
 | 参数名  | 类型                            | 必填 | 说明                                                         |
 | ------- | ------------------------------- | ---- | ------------------------------------------------------------ |
-| options | [RouterOptions](#routeroptions) | 否   | 返回页面描述信息，其中参数url指路由跳转时会返回到指定url的界面，如果页面栈上没有url页面，则不响应该情况。如果url未设置，则返回上一页，页面栈里面的page不会回收，出栈后会被回收。 |
+| options | [RouterOptions](#routeroptions) | 否   | 返回页面描述信息，其中参数url指路由跳转时会返回到指定url的界面，如果页面栈上没有url页面，则不响应该情况。如果url未设置，则返回上一页，页面不会重新构建，页面栈里面的page不会回收，出栈后会被回收。 |
 
 **示例：**
 

zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md

@@ -130,7 +130,7 @@ text {
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import prompt from '@ohos.promptAction';
 
 export default {
     data: {

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

@@ -80,6 +80,8 @@
 支持[通用事件](ts-universal-events-click.md)。
 ## 示例
 
+### 示例1
+
 ```ts
 // xxx.ets
 @Entry
@@ -136,4 +138,34 @@ struct ButtonExample {
 }
 ```
 
-![button](figures/button.gif)
+![button](figures/button.gif)
\ No newline at end of file
+
+### 示例2 
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct SwipeGestureExample {
+  @State count: number = 0
+
+  build() {
+    Column() {
+      Text(`${this.count}`)
+        .fontSize(30)
+        .onClick(() => {
+          this.count++
+        })
+      if (this.count <= 0) {
+        Button('count is negative').fontSize(30).height(50)
+      } else if (this.count % 2 === 0) {
+        Button('count is even').fontSize(30).height(50)
+      } else {
+        Button('count is odd').fontSize(30).height(50)
+      }
+    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
+  }
+}
+```
+
+![ifButton](figures/ifButton.gif)
\ No newline at end of file

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

@@ -369,7 +369,7 @@ import context from '@ohos.app.ability.common';
 struct LoadImageExample {
   @State resourcesPath: string = ''
   @State sandboxPath: string = ''
-  context: context.UIAbility = getContext(this) as context.UIAbilityContext
+  context: context.UIAbilityContext = getContext(this) as context.UIAbilityContext
 
   build() {
     Column() {
@@ -396,6 +396,12 @@ struct LoadImageExample {
       Image(this.resourcesPath)
         .width(100)
         .height(100)
+        .colorFilter([
+          0.30, 0.59, 0.11, 0, 0,
+          0.30, 0.59, 0.11, 0, 0,
+          0.30, 0.59, 0.11, 0, 0,
+          0, 0, 0, 1.0, 0
+        ])
       Text(`沙箱图片路径:${this.sandboxPath}`)
         .fontSize(20)
         .margin({ bottom: 10 })

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

@@ -43,4 +43,4 @@ struct LoadingProgressExample {
 }
 ```
 
-![loadProgress](figures/loadProgress.jpeg)
+![LoadingProgress](figures/LoadingProgress.gif)

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

@@ -144,6 +144,9 @@ struct TextInputExample {
         .margin(20)
         .fontSize(14)
         .fontColor(Color.Black)
+        .inputFilter('[a-z]', (e) => {
+          console.log(JSON.stringify(e))
+        })
         .onChange((value: string) => {
           this.text = value
         })

zh-cn/application-dev/reference/arkui-ts/ts-container-list.md

@@ -92,7 +92,7 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?
 | 名称 | 功能描述 |
 | -------- | -------- |
 | onItemDelete<sup>(deprecated)</sup>(event: (index: number) => boolean) | 当List组件在编辑模式时，点击ListItem右边出现的删除按钮时触发。<br/>从API version9开始废弃。<br/>- index: 被删除的列表项的索引值。 |
-| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。<br/>- scrollOffset: 滑动偏移量。<br/>- [scrollState](#scrollstate枚举说明): 当前滑动状态。<br/>使用控制器调用ScrollEdge和ScrollToIndex时不会触发，其余情况有滚动就会触发该事件。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发。<br/>- scrollOffset: 每帧滚动的偏移量，List的内容向上滚动时偏移量为正，向下滚动时偏移量为负。<br/>- [scrollState](#scrollstate枚举说明): 当前滑动状态。<br/>使用控制器调用ScrollEdge和ScrollToIndex时不会触发，其余情况有滚动就会触发该事件。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
 | onScrollIndex(event: (start: number, end: number) => void) | 有子组件划入或划出List显示区域时触发。<br/>计算索引值时，ListItemGroup作为一个整体占一个索引值，不计算ListItemGroup内部ListItem的索引值。<br/>- start: 滑动起始位置索引值。<br/>- end: 滑动结束位置索引值。<br/>触发该事件的条件：列表初始化时会触发一次，List显示区域内第一个子组件的索引值或后一个子组件的索引值有变化时会触发。<br/>List的边缘效果为弹簧效果时，在List划动到边缘继续划动和松手回弹过程不会触发onScrollIndex事件。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
 | onReachStart(event: () => void) | 列表到达起始位置时触发。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br>List初始化时如果initialIndex为0会触发一次，List滚动到起始位置时触发一次。List边缘效果为弹簧效果时，划动经过起始位置时触发一次，回弹回起始位置时再触发一次。 |
 | onReachEnd(event: () => void) | 列表到底末尾位置时触发。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>List边缘效果为弹簧效果时，划动经过末尾位置时触发一次，回弹回末尾位置时再触发一次。 |

zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md

@@ -104,14 +104,13 @@ SideBarContainer( type?: SideBarContainerType )
 @Entry
 @Component
 struct SideBarContainerExample {
-  normalIcon : Resource = $r("app.media.icon")
+  normalIcon: Resource = $r("app.media.icon")
   selectedIcon: Resource = $r("app.media.icon")
   @State arr: number[] = [1, 2, 3]
   @State current: number = 1
 
   build() {
-    SideBarContainer(SideBarContainerType.Embed)
-    {
+    SideBarContainer(SideBarContainerType.Embed) {
       Column() {
         ForEach(this.arr, (item, index) => {
           Column({ space: 5 }) {
@@ -136,6 +135,13 @@ struct SideBarContainerExample {
       }
       .margin({ top: 50, left: 20, right: 30 })
     }
+    .controlButton({
+      icons: {
+        hidden: $r('app.media.drawer'),
+        shown: $r('app.media.drawer'),
+        switching: $r('app.media.drawer')
+      }
+    })
     .sideBarWidth(150)
     .minSideBarWidth(50)
     .maxSideBarWidth(300)

zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md

@@ -28,9 +28,9 @@ Stack(value?: { alignContent?: Alignment })
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 名称         | 参数类型                                    | 描述                           |
-| ------------ | ------------------------------------------- | ------------------------------ |
-| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 设置子组件在容器内的对齐方式。<br/>默认值：Alignment.Center<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
+| 名称         | 参数类型                                    | 描述                                                         |
+| ------------ | ------------------------------------------- | ------------------------------------------------------------ |
+| alignContent | [Alignment](ts-appendix-enums.md#alignment) | 设置子组件在容器内的对齐方式。<br/>默认值：Alignment.Center<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>该属性与[通用属性align](ts-universal-attributes-location.md)同时设置时，只有align属性生效。 |
 
 
 ## 示例

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md

@@ -45,6 +45,113 @@
 
 ## 示例
 
+### 示例1
+
+```ts
+@Observed
+class ClassA {
+  public name: string
+  public bol: boolean
+
+  constructor(name: string, bol: boolean) {
+    this.name = name
+    this.bol = bol
+  }
+}
+
+@Extend(Text) function textStyle() {
+  .width('25%')
+  .height(35)
+  .fontSize(16)
+  .textAlign(TextAlign.Center)
+  .backgroundColor(0xAFEEEE)
+}
+
+@Entry
+@Component
+struct DragExample {
+  @State arr: ClassA[] = [new ClassA('A', true), new ClassA('B', true), new ClassA('C', true)]
+  @State dragIndex: number = 0
+
+  changeIndex(index1: number, index2: number) { // 交换数组位置
+    [this.arr[index1], this.arr[index2]] = [this.arr[index2], this.arr[index1]];
+  }
+
+  build() {
+    Column() {
+      Row({ space: 15 }) {
+        List({ space: 20 }) {
+          ForEach(this.arr, (item, index) => {
+            ListItem() {
+              Column() {
+                Child({ a: this.arr[index] })
+              }
+              .onTouch((event: TouchEvent) => {
+                if (event.type === TouchType.Down) {
+                  this.dragIndex = index // 获取当前拖拽子组件的索引
+                  console.info('onTouch' + this.dragIndex)
+                }
+              })
+            }
+          })
+        }
+        .listDirection(Axis.Horizontal)
+        .onDrop((event: DragEvent, extraParams: string) => { // 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
+          let jsonString = JSON.parse(extraParams);
+          this.changeIndex(this.dragIndex, jsonString.insertIndex)
+        })
+      }.padding({ top: 10, bottom: 10 }).margin(10)
+
+    }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
+  }
+}
+
+@Component
+struct Child {
+  @ObjectLink a: ClassA
+
+  @Builder pixelMapBuilder() {
+    Column() {
+      Text(this.a.name)
+        .width('50%')
+        .height(60)
+        .fontSize(16)
+        .borderRadius(10)
+        .textAlign(TextAlign.Center)
+        .backgroundColor(Color.Yellow)
+    }
+  }
+
+  build() {
+    Column() {
+      Text(this.a.name)
+        .textStyle()
+        .visibility(this.a.bol ? Visibility.Visible : Visibility.None)
+        .onDragStart(() => { // 第一次拖拽此事件绑定的组件时，触发回调。
+          this.a.bol = false // 控制显隐
+          return this.pixelMapBuilder() // 设置拖拽过程中显示的图片。
+        })
+        .onTouch((event: TouchEvent) => {
+          if (event.type === TouchType.Up) {
+            this.a.bol = true
+          }
+        })
+      Text('')
+        .width('25%')
+        .height(35)
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .border({ width: 5, color: 'red' })
+        .visibility(!this.a.bol ? Visibility.Visible : Visibility.None)
+    }
+  }
+}
+```
+
+![drag-drop](figures/drag-drop.gif)
+
+### 示例2
+
 ```ts
 // xxx.ets
 @Extend(Text) function textStyle () {