diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/border_spring.gif b/zh-cn/application-dev/reference/arkui-ts/figures/border_spring.gif new file mode 100644 index 0000000000000000000000000000000000000000..91ac864a628eeee65b3415cc5910081e8db10a38 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/border_spring.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/drag_between_grid.gif b/zh-cn/application-dev/reference/arkui-ts/figures/drag_between_grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..b96c769c2d50d6123a8e75da9e38b3c21a6f8f73 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/drag_between_grid.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_grid.gif b/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..57d13aa8ac2929afcf05e9639c8035b88839a553 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_grid.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_out_grid.gif b/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_out_grid.gif new file mode 100644 index 0000000000000000000000000000000000000000..1f1b1cc5d085d7b04e30634ee18795c07e5ae4d8 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/drag_in_out_grid.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/grid_edit_drag.gif b/zh-cn/application-dev/reference/arkui-ts/figures/grid_edit_drag.gif new file mode 100644 index 0000000000000000000000000000000000000000..c76390cf988e6e7bbd154c1b2f116d3f2654d791 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/grid_edit_drag.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md new file mode 100644 index 0000000000000000000000000000000000000000..bdcfe22cb96338281a1a0b88b59b2d354fb41953 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md @@ -0,0 +1,81 @@ +# PatternLock8+ + +图案密码锁组件，以宫格图案的方式输入密码，用于密码验证。 + +## 子组件 + +无。 + +## 接口 + +PatternLock(controller?: PatternLockController) + +- 参数 + + | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | + | ---------- | --------------------- | ---- | ------ | -------------------------------------------- | + | controller | PatternLockController | 否 | null | 给组件绑定一个控制器，用来控制组件状态重置。 | + +- PatternLockController + + PatternLock组件的控制器，可以将此对象绑定至PatternLock组件，然后通过它进行状态重置。 + + | 接口名称 | 功能描述 | + | ------------- | -------------- | + | reset():void; | 重置组件状态。 | + +## 属性方法 + +不支持*`backgroundColor`*以外的通用属性设置。 + +| 名称 | 参数类型 | 默认值 | 描述 | +| ------------------------------------------------------ | ---------------- | ----------- | ------------------------------------------------------------ | +| sideLenght | Length | 300dp | 设置组件的宽度和高度（相同值）。最小可以设置为0。 | +| circleRadius | Length | 14dp | 设置宫格圆点的半径。 | +| backgroundColor | ResourceColor | 无 | 设置组件的背景色。 | +| regularColor | ResourceColor | Color.Black | 设置宫格圆点在“未选中”状态的填充颜色。 | +| selectedColor | ResourceColor | Color.Black | 设置宫格圆点在“选中”状态的填充颜色。 | +| activeColor | ResourceColor | Color.Black | 设置宫格圆点在“激活”状态的填充颜色。 | +| pathColor | ResourceColor | Color.Blue | 设置线段的颜色。 | +| pathStrokeWidth | number or string | 34dp | 设置连线的宽度。最小可以设置为0。 | +| autoReset | boolean | true | 设置是否支持用户在完成输入后再次触屏重置组件状态。如果设置为true，用户可以通过触摸图案密码锁重置组件状态（清除之前的输入效果）；如果设置为false，用户手指离开屏幕完成输入后，再次触摸图案密码锁（包括圆点）不能改变之前的输入状态。 | + +## 事件方法 + +| 事件名 | 参数类型 | 默认值 | 描述 | +| -------------------------------------------------------- | ------------- | ------ | ------------------------------------------------------------ | +| onPatternComplete | Array | 无 | 指定输入状态结束时被调用的回调函数，参数是和输入顺序一致的数字数组。 | + +## 示例 + +```typescript +@Entry +@Component +struct SwiperExample { + @State passwords: Number[] = [] + private patternLockController: PatternLockController = new PatternLockController() + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + PatternLock(this.patternLockController) + .onPatternComplete((input) => { + if(!input) { + return; + } + console.info(input.toString()) //打印输入的字符数组 + if(input.length < 4) { //要求密码至少输入四个数字 + //根据应用需要提示错误消息 + this.patternLockController.reset() //重置密码锁状态 + return + } + this.passwords = input; + }) + Text(this.passwords.toString()).fontSize(18).fontColor(0x123A42) //显示输入的密码 + Button('Reset').onClick(() => { + this.patternLockController.reset() + }) + }.width('100%').height('100%') + } +} +``` + diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index 5a1014c3aee29078999b85c45566a876067d87b0..a5ac9ddca41d28704a21d35b1e15a17dc3422f53 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -1,148 +1,441 @@ -# Grid - -网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 - -## 权限类别 - -无 - -## 子组件 - -包含[GridItem](ts-container-griditem.md)子组件。 - -## 接口说明 - -Grid\(\) - -## 属性 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称

-

参数类型

-

默认值

-

描述

-

columnsTemplate

-

string

-

'1fr'

-

用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。

-

rowsTemplate

-

string

-

'1fr'

-

用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

-

columnsGap

-

Length

-

0

-

用于设置列与列的间距。

-

rowsGap

-

Length

-

0

-

用于设置行与行的间距。

-
- -## 事件 - - - - - - - - - - -

名称

-

功能描述

-

onScrollIndex(first: number) => void

-

当前列表显示的起始位置item发生变化时触发。

-
- -## 示例 - -``` -@Entry -@Component -struct GridExample { - @State Number: String[] = ['0', '1', '2', '3', '4'] - - build() { - Column({ space: 5 }) { - Grid() { - ForEach(this.Number, (day: string) => { - ForEach(this.Number, (day: string) => { - GridItem() { - Text(day) - .fontSize(16) - .backgroundColor(0xF9CF93) - .width('100%') - .height('100%') - .textAlign(TextAlign.Center) - } - }, day => day) - }, day => day) - } - .columnsTemplate('1fr 1fr 1fr 1fr 1fr') - .rowsTemplate('1fr 1fr 1fr 1fr 1fr') - .columnsGap(10) - .rowsGap(10) - .width('90%') - .backgroundColor(0xFAEEE0) - .height(300) - - Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') - Grid() { - ForEach(this.Number, (day: string) => { - ForEach(this.Number, (day: string) => { - GridItem() { - Text(day) - .fontSize(16) - .backgroundColor(0xF9CF93) - .width('100%') - .height(80) - .textAlign(TextAlign.Center) - } - }, day => day) - }, day => day) - } - .columnsTemplate('1fr 1fr 1fr 1fr 1fr') - .columnsGap(10) - .rowsGap(10) - .onScrollIndex((first: number) => { - console.info(first.toString()) - }) - .width('90%') - .backgroundColor(0xFAEEE0) - .height(300) - }.width('100%').margin({ top: 5 }) - } -} -``` - -![](figures/grid-17.gif) - +# Grid + +网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 + +## 权限类别 + +无 + +## 子组件 + +包含[GridItem](ts-container-griditem.md)子组件。 + +## 接口 + +Grid\(\) + +## 属性 + +不支持*`backgroundColor`*以外的通用属性设置。 + +| 名称 | 参数类型 | 默认值 | 描述 | +| ------------------------------------------------------- | --------------- | -------------------- | ------------------------------------------------------------ | +| columnsTemplate | string | '1fr' | 用于设置当前网格布局列的数量，不设置时默认1列 示例, '1fr 1fr 2fr' 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。 | +| rowsTemplate | string | '1fr' | 用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 | +| columnsGap | Length | 0 | 用于设置列与列的间距。 | +| rowsGap | Length | 0 | 用于设置行与行的间距。 | +| editMode8+ | boolean | false | 进入编辑模式，支持Gird组件内部拖拽。 | +| layoutDirection8+ | LayoutDirection | LayoutDirection::Row | LayoutDirection::Row：Grid水平方向布局
LayoutDirection::Column：Grid垂直方向布局
LayoutDirection::RowReverse：Grid水平方向布局
LayoutDirection::ColumnReverse：Grid水平方向布局 | +| maxCount8+ | number | 1 | 当Grid为垂直方向布局，表示可显示的最大行数；当Grid为水平方向布局，表示可显示的最大列数。 | +| minCount8+ | number | 1 | 当Grid为垂直方向布局，表示可显示的最小行数；当Grid为水平方向布局，表示可显示的最小列数。 | +| cellLength8+ | number | 0 | 当Grid为垂直方向布局，表示每行的固定高度；当Grid为水平方向布局，表示每列的固定宽度。 | +| direction8+ | GridDirection | GridDirection::LTR | 横向布局方向类型，可选值为：
GridDirection::LTR
GridDirection::RTL
GridDirection::Auto | +| supportAnimation8+ | boolean | true | Grid是否支持引力动画：true表示支持引力动画，false不支持引力动画。 | + +## 事件 + +| 名称 | 功能描述 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onScrollIndex(first: number) => void | 当前列表显示的起始位置item发生变化时触发。 | +| onItemDragStart8+(event: ItemDragInfo, itemIndex: number) => ((() => any) \| void) | 绑定后，第一次拖拽item时，触发回调。（当监听了onDrop事件时，此事件才有效）
itemindex: 当前被拖拽的item原本的索引。 | +| onItemDragEnter8+(event: ItemDragInfo) => void | 绑定后，拖拽进入组件范围内时，触发回调。（当监听了onDrop事件时，此事件才有效） | +| onItemDragMove8+(event: ItemDragInfo, itemIndex: number, insertIndex: number) => void | 绑定后，拖拽在可放置组件范围内移动时，触发回调。（当监听了onDrop事件时，此事件才有效）
insertIndex: 当前拖入宫格进行插入后item的索引。
itemindex: 当前被拖拽的item原本的索引。 | +| onItemDragLeave8+(event: ItemDragInfo, itemIndex: number) => void | 绑定后，拖拽离开组件范围内时，触发回调。（当监听了onDrop事件时，此事件才有效）
itemindex: 当前被拖拽的item原本的索引。 | +| onItemDrop8+(event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void | 绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发此回调。
insertIndex: 当前拖入宫格进行插入后item的索引。
itemindex: 当前被拖拽的item原本的索引。
isSuccess: drop时插入是否成功。
(场景1:isSuccess = true, itemindex > 0, insertIndex > 0。调整内部item位置;
场景2:isSuccess = true, itemindex = -1, insertIndex > 0。插入新的item;
场景3:isSuccess = true, itemindex > 0, insertIndex = -1。删除内部item;
场景4:isSuccess = false。事件不做任何处理) | + +## 示例 + +```typescript +@Entry +@Component +struct GridExample { + @State Number: String[] = ['0', '1', '2', '3', '4'] + + build() { + Column({ space: 5 }) { + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(300) + + Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%') + Grid() { + ForEach(this.Number, (day: string) => { + ForEach(this.Number, (day: string) => { + GridItem() { + Text(day) + .fontSize(16) + .backgroundColor(0xF9CF93) + .width('100%') + .height(80) + .textAlign(TextAlign.Center) + } + }, day => day) + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .onScrollIndex((first: number) => { + console.info(first.toString()) + }) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(300) + }.width('100%').margin({ top: 5 }) + } +} +``` + +![](figures\grid-17.gif) + +```javascript +@Entry +@Component +struct Hello { + @State Number2: String[] = ['a', 'b', 'c'] + @State Number1: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'] + private NumberTmp: String[] = [] + private DragNumberCash: String[] = [] + private DragItemIndex : number + @State ConflictTest : string = 'ConflictTest' + @Builder SquareText() { + Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column, alignItems: ItemAlign.Center }){ + Text("label1") + .fontSize(20) + .backgroundColor(Color.Yellow) + }.width(100) + .height(100) + } + @Builder SquareText2() { + Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column, alignItems: ItemAlign.Center }){ + Text("label2") + .fontSize(20) + .backgroundColor(Color.Yellow) + }.width(100) + .height(100) + } + build() { + Column({ space: 10 }) { + Button() {} + Grid() { + ForEach(this.Number2, (day: string) => { + GridItem() { + Text(day) + .fontSize(30) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + } + .rowsTemplate('1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .minCount(1) + .maxCount(3) + .cellLength(100) + .direction(1) + .backgroundColor(0xFAEEE0) + .height(240) + .editMode(true) + .onItemDragEnter((event)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragEnter called: x:"+event.x + " y:"+event.y); + }) + + .onItemDragMove((event, itemIndex, insertIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragMove called: itemIndex=" + itemIndex + + ",insertIndex=" + insertIndex + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragLeave((event, itemIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragLeave called: itemIndex=" + itemIndex + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragStart((event, itemIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragStart called: itemIndex=" + itemIndex + " x:"+event.x + " y:"+event.y); + this.DragNumberCash = this.Number2; + this.DragItemIndex = itemIndex; + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDragStart called: DragNumberCash=" + this.DragNumberCash + " DragNumber: " + this.DragNumberCash[itemIndex]); + return this.SquareText2; + }) + + .onItemDrop((event, itemIndex, insertIndex, isSuccess)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop called: itemIndex=" + itemIndex + + ",insertIndex=" + insertIndex + ", isSuccess=" + isSuccess + " x:"+event.x + " y:"+event.y); + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop old array:" + this.Number2); + if (isSuccess) { + if (itemIndex >= 0 && insertIndex >= 0 ){ //调整内部item位置 + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop move"); + this.NumberTmp = this.Number2; + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop DragNumber=" + this.DragNumberCash[itemIndex]); + if (itemIndex > insertIndex) { + this.NumberTmp.splice(insertIndex,0,this.DragNumberCash[itemIndex]); + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop after1 insert array:" + this.Number2); + this.NumberTmp.splice(itemIndex + 1,1); + } else { + this.NumberTmp.splice(insertIndex + 1,0,this.DragNumberCash[itemIndex]); + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop after2 insert array:" + this.Number2); + this.NumberTmp.splice(itemIndex,1); + } + this.Number2 = this.NumberTmp; + } else if (itemIndex == -1 && insertIndex >= 0) { //插入新的item + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop insert"); + this.Number2.splice(insertIndex,0,this.DragNumberCash[this.DragItemIndex]); + } else if (itemIndex >= 0 && insertIndex == -1) { //删除内部item + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop delete"); + this.Number2.splice(itemIndex,1); + } + } + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop new array:" + this.Number2); + }) + + + Grid() { + ForEach(this.Number1, (day: string) => { + GridItem() { + Text(day) + .fontSize(30) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(260) + .editMode(true) + .direction(0) + .layoutDirection(1) + .onItemDragEnter((event)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragEnter called:" + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragMove((event, itemIndex, insertIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragMove called: itemIndex=" + itemIndex + + ",insertIndex=" + insertIndex + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragLeave((event, itemIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragLeave called: itemIndex=" + itemIndex + " x:"+event.x + " y:"+event.y); + }) + + .onItemDragStart((event, itemIndex)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragStart called: itemIndex=" + itemIndex + " x:"+event.x + " y:"+event.y); + this.DragNumberCash = this.Number1; + this.DragItemIndex = itemIndex; + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDragStart called: DragNumberCash=" + this.DragNumberCash + " DragNumber: " + this.DragNumberCash[itemIndex]); + return this.SquareText; + }) + + .onItemDrop((event, itemIndex, insertIndex, isSuccess)=>{ + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop called: itemIndex=" + itemIndex + + ",insertIndex=" + insertIndex + ", isSuccess=" + isSuccess + " x:"+event.x + " y:"+event.y); + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop old array:" + this.Number1); + if (isSuccess) { + if (itemIndex >= 0 && insertIndex >= 0 ){ //调整内部item位置 + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop move"); + this.NumberTmp = this.Number1; + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop DragNumber=" + this.DragNumberCash[itemIndex]); + if (itemIndex > insertIndex) { + this.NumberTmp.splice(insertIndex,0,this.DragNumberCash[itemIndex]); + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop after1 insert array:" + this.Number1); + this.NumberTmp.splice(itemIndex + 1,1); + } else { + this.NumberTmp.splice(insertIndex + 1,0,this.DragNumberCash[itemIndex]); + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop after2 insert array:" + this.Number1); + this.NumberTmp.splice(itemIndex,1); + } + this.Number1 = this.NumberTmp; + } else if (itemIndex == -1 && insertIndex >= 0) { //插入新的item + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop insert"); + this.Number1.splice(insertIndex,0,this.DragNumberCash[this.DragItemIndex]); + } else if (itemIndex >= 0 && insertIndex == -1) { //删除内部item + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop delete"); + this.Number1.splice(itemIndex,1); + } + } + console.log(">>>>>>>> RenderGridLayout grid 1: onGridDrop new array:" + this.Number1); + }) + + }.width('100%').margin({ top: 0 }) + } +} + +``` + +![](figures\grid_edit_drag.gif) + +![](figures\border_spring.gif) + +```javascript +@Entry +@Component +struct Hello { + @Builder NumberBuilder() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}){ + Text('drag1').fontSize(20) + }.width(80).height(80).backgroundColor(Color.Red) + } + + @Builder LetterBuilder() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}){ + Text('drag2').fontSize(20) + }.width(80).height(80).backgroundColor(Color.Blue) + } + + @State Number1: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] + @State Number2: String[] = ['一', '二', '三'] + private NumberTmp: String[] = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'] + private DragNumberCash: String[] = ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'] + private DragItemIndex : number + build() { + Column({ space: 100 }) { + Button() { + } + Grid() { + ForEach(this.Number1, (day: string) => { + GridItem() { + Text(day) + .fontSize(30) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr') + .columnsGap(10) + .rowsGap(10) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(260) + .editMode(true) + .supportAnimation(true) + .onItemDragEnter((event)=>{ + }) + + .onItemDragMove((event, itemIndex, insertIndex)=>{ + }) + + .onItemDragLeave((event, itemIndex)=>{ + }) + + .onItemDragStart((event, itemIndex)=>{ + this.DragNumberCash = this.Number1; + this.DragItemIndex = itemIndex; + return this.NumberBuilder; + }) + + .onItemDrop((event, itemIndex, insertIndex, isSuccess)=>{ + if (isSuccess) { + if (itemIndex >= 0 && insertIndex >= 0 ){ + this.NumberTmp = this.Number1; + if (itemIndex > insertIndex) { + this.NumberTmp.splice(insertIndex,0,this.DragNumberCash[itemIndex]); + this.NumberTmp.splice(itemIndex + 1,1); + } else { + this.NumberTmp.splice(insertIndex + 1,0,this.DragNumberCash[itemIndex]); + this.NumberTmp.splice(itemIndex,1); + } + this.Number1 = this.NumberTmp; + } else if (itemIndex == -1 && insertIndex >= 0) { + this.Number1.splice(insertIndex,0,this.DragNumberCash[this.DragItemIndex]); + } else if (itemIndex >= 0 && insertIndex == -1) { + this.Number1.splice(itemIndex,1); + } + } + }) + + Grid() { + ForEach(this.Number2, (day: string) => { + GridItem() { + Text(day) + .fontSize(30) + .backgroundColor(0xF9CF93) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr') + .rowsTemplate('1fr 1fr') + .columnsGap(60) + .rowsGap(60) + .width('90%') + .backgroundColor(0xFAEEE0) + .height(260) + .editMode(true) + .onItemDragEnter((event)=>{ + }) + + .onItemDragMove((event, itemIndex, insertIndex)=>{ + }) + + .onItemDragLeave((event, itemIndex)=>{ + }) + + .onItemDragStart((event, itemIndex)=>{ + this.DragNumberCash = this.Number2; + this.DragItemIndex = itemIndex; + return this.LetterBuilder; + }) + + .onItemDrop((event, itemIndex, insertIndex, isSuccess)=>{ + console.log(">>>>>>>> RenderGridLayout grid 2: onGridDrop old array:" + this.Number2); + if (isSuccess) { + if (itemIndex >= 0 && insertIndex >= 0 ){ + this.NumberTmp = this.Number2; + if (itemIndex > insertIndex) { + this.NumberTmp.splice(insertIndex,0,this.DragNumberCash[itemIndex]); + this.NumberTmp.splice(itemIndex + 1,1); + } else { + this.NumberTmp.splice(insertIndex + 1,0,this.DragNumberCash[itemIndex]); + this.NumberTmp.splice(itemIndex,1); + } + this.Number2 = this.NumberTmp; + } else if (itemIndex == -1 && insertIndex >= 0) { + this.Number2.splice(insertIndex,0,this.DragNumberCash[this.DragItemIndex]); + } else if (itemIndex >= 0 && insertIndex == -1) { + this.Number2.splice(itemIndex,1); + } + } + }) + + }.width('100%').margin({ top: 0 }) + } +} +``` + +![](figures\drag_in_grid.gif) + +![](figures\drag_in_out_grid.gif) + +![](figures\drag_between_grid.gif) \ No newline at end of file