!20778 示例代码位置调整

Merge pull request !20778 from LiAn/master

!20778 示例代码位置调整
Merge pull request !20778 from LiAn/master
af6b900d · openharmony_ci · Gitee · 266d98ec · 49638582 · af6b900d
3 changed file
--- a/zh-cn/application-dev/faqs/faqs-arkui-arkts.md
+++ b/zh-cn/application-dev/faqs/faqs-arkui-arkts.md
@@ -774,147 +774,6 @@ Text组件不用设置lineHeight属性，默认就是居中的。绘制文本是
 [Text](../reference/arkui-ts/ts-basic-components-text.md#示例1)
-## SideBarContainer如何设置controlButton属性
-适用于 OpenHarmony 3.2 Beta5，API9
-**解决措施**
-示例代码：
-```
-@Entry
-@Component
-struct SideBarContainerExample {
-  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)
-    {
-      Column() {
-        ForEach(this.arr, (item, index) => {
-          Column({ space: 5 }) {
-            Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
-            Text("Index0" + item)
-              .fontSize(25)
-              .fontColor(this.current === item ? '#0A59F7' : '#999')
-              .fontFamily('source-sans-pro,cursive,sans-serif')
-          }
-          .onClick(() => {
-            this.current = item
-          })
-        }, item => item)
-      }.width('100%')
-      .justifyContent(FlexAlign.SpaceEvenly)
-      .backgroundColor('#19000000')
-      Column() {
-        Text('SideBarContainer content text1').fontSize(25)
-        Text('SideBarContainer content text2').fontSize(25)
-      }
-      .margin({ top: 50, left: 20, right: 30 })
-    }
-    .sideBarWidth(150)
-    .minSideBarWidth(50)
-    .controlButton({left:32,
-      top:32,
-      width:32,
-      height:32, 
-      icons:{shown: $r("app.media.icon"),
-        hidden: $r("app.media.icon"),
-        switching: $r("app.media.icon")}})
-    .maxSideBarWidth(300)
-    .onChange((value: boolean) => {
-      console.info('status:' + value)
-    })
-  }
-}
-```
-## Grid如何实现拖拽功能
-适用于 OpenHarmony 3.2 Beta5 ，API9
-**解决措施**
-1.  grid组件下设置属性editMode\(true\)设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
-2.  在[onItemDragStart](../reference/arkui-ts/ts-container-grid.md#事件)回调中设置拖拽过程中显示的图片
-3.  在[onItemDrop](../reference/arkui-ts/ts-container-grid.md#事件)中获取拖拽起始位置，和拖拽插入位置，在[onDrag](../reference/arkui-ts/ts-universal-events-drag-drop.md#事件)回调中完成交换数组位置逻辑。示例代码：
-    ```
-    @Entry
-    @Component
-    struct GridExample {
-      @State numbers: String[] = []
-      scroller: Scroller = new Scroller()
-      @State text: string = 'drag'
-      @Builder pixelMapBuilder() { //拖拽过程样式
-        Column() {
-          Text(this.text)
-            .fontSize(16)
-            .backgroundColor(0xF9CF93)
-            .width(80)
-            .height(80)
-            .textAlign(TextAlign.Center)
-        }
-      }
-      aboutToAppear() {
-        for (let i = 1;i <= 15; i++) {
-          this.numbers.push(i + '')
-        }
-      }
-      changeIndex(index1: number, index2: number) { //交换数组位置
-        [this.numbers[index1], this.numbers[index2]] = [this.numbers[index2], this.numbers[index1]];
-      }
-      build() {
-        Column({ space: 5 }) {
-          Grid(this.scroller) {
-            ForEach(this.numbers, (day: string) => {
-              GridItem() {
-                Text(day)
-                  .fontSize(16)
-                  .backgroundColor(0xF9CF93)
-                  .width(80)
-                  .height(80)
-                  .textAlign(TextAlign.Center)
-                  .onTouch((event: TouchEvent) => {
-                    if (event.type === TouchType.Up) {
-                      this.text = day
-                    }
-                  })
-              }
-            })
-          }
-          .columnsTemplate('1fr 1fr 1fr')
-          .columnsGap(10)
-          .rowsGap(10)
-          .onScrollIndex((first: number) => {
-            console.info(first.toString())
-          })
-          .width('90%')
-          .backgroundColor(0xFAEEE0)
-          .height(300)
-          .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
-          .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。
-            return this.pixelMapBuilder() //设置拖拽过程中显示的图片。
-          })
-          .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
-            console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置
-            this.changeIndex(itemIndex, insertIndex)
-          })
-        }.width('100%').margin({ top: 5 })
-      }
-    }
-    ```
 ## 使用什么接口进行url编码

--- a/zh-cn/application-dev/faqs/faqs-arkui-component.md
+++ b/zh-cn/application-dev/faqs/faqs-arkui-component.md
@@ -701,3 +701,64 @@ struct MyComponent {
 **参考链接**
 焦点控制：[焦点控制](../reference/arkui-ts/ts-universal-attributes-focus.md)
+## SideBarContainer如何设置controlButton属性
+适用于 OpenHarmony 3.2 Beta5，API9
+**解决措施**
+示例代码：
+```
+@Entry
+@Component
+struct SideBarContainerExample {
+  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)
+    {
+      Column() {
+        ForEach(this.arr, (item, index) => {
+          Column({ space: 5 }) {
+            Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
+            Text("Index0" + item)
+              .fontSize(25)
+              .fontColor(this.current === item ? '#0A59F7' : '#999')
+              .fontFamily('source-sans-pro,cursive,sans-serif')
+          }
+          .onClick(() => {
+            this.current = item
+          })
+        }, item => item)
+      }.width('100%')
+      .justifyContent(FlexAlign.SpaceEvenly)
+      .backgroundColor('#19000000')
+      Column() {
+        Text('SideBarContainer content text1').fontSize(25)
+        Text('SideBarContainer content text2').fontSize(25)
+      }
+      .margin({ top: 50, left: 20, right: 30 })
+    }
+    .sideBarWidth(150)
+    .minSideBarWidth(50)
+    .controlButton({left:32,
+      top:32,
+      width:32,
+      height:32, 
+      icons:{shown: $r("app.media.icon"),
+        hidden: $r("app.media.icon"),
+        switching: $r("app.media.icon")}})
+    .maxSideBarWidth(300)
+    .onChange((value: boolean) => {
+      console.info('status:' + value)
+    })
+  }
+}
+```
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md
@@ -134,6 +134,8 @@ Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为
 ## 示例
+### 示例1
 ```ts
 // xxx.ets
 @Entry
@@ -204,3 +206,82 @@ struct GridExample {
 ```
 ![zh-cn_image_0000001219744183](figures/zh-cn_image_0000001219744183.gif)
+### 示例2
+1.  设置属性editMode\(true\)设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem。
+2.  在[onItemDragStart](#事件)回调中设置拖拽过程中显示的图片。
+3.  在[onItemDrop](#事件)中获取拖拽起始位置，和拖拽插入位置，在[onDrag](#事件)回调中完成交换数组位置逻辑。
+```ts
+@Entry
+@Component
+struct GridExample {
+  @State numbers: String[] = []
+  scroller: Scroller = new Scroller()
+  @State text: string = 'drag'
+  @Builder pixelMapBuilder() { //拖拽过程样式
+    Column() {
+      Text(this.text)
+        .fontSize(16)
+        .backgroundColor(0xF9CF93)
+        .width(80)
+        .height(80)
+        .textAlign(TextAlign.Center)
+    }
+  }
+  aboutToAppear() {
+    for (let i = 1;i <= 15; i++) {
+      this.numbers.push(i + '')
+    }
+  }
+  changeIndex(index1: number, index2: number) { //交换数组位置
+    [this.numbers[index1], this.numbers[index2]] = [this.numbers[index2], this.numbers[index1]];
+  }
+  build() {
+    Column({ space: 5 }) {
+      Grid(this.scroller) {
+        ForEach(this.numbers, (day: string) => {
+          GridItem() {
+            Text(day)
+              .fontSize(16)
+              .backgroundColor(0xF9CF93)
+              .width(80)
+              .height(80)
+              .textAlign(TextAlign.Center)
+              .onTouch((event: TouchEvent) => {
+                if (event.type === TouchType.Up) {
+                  this.text = day
+                }
+              })
+          }
+        })
+      }
+      .columnsTemplate('1fr 1fr 1fr')
+      .columnsGap(10)
+      .rowsGap(10)
+      .onScrollIndex((first: number) => {
+        console.info(first.toString())
+      })
+      .width('90%')
+      .backgroundColor(0xFAEEE0)
+      .height(300)
+      .editMode(true) //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
+      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时，触发回调。
+        return this.pixelMapBuilder() //设置拖拽过程中显示的图片。
+      })
+      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
+        console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置
+        this.changeIndex(itemIndex, insertIndex)
+      })
+    }.width('100%').margin({ top: 5 })
+  }
+}
+```