HarmonyOS NEXT 實戰開發—Grid和List內拖拽交換子元件位置

生活就是这么怪發表於2024-04-24
元件

介紹

本示例分別透過onItemDrop()和onDrop()回撥，實現子元件在Grid和List中的子元件位置交換。

效果圖預覽

使用說明：

  1. 拖拽Grid中子元件，到目標Grid子元件位置，進行兩者位置互換。
  2. 拖拽List中子元件，到目標List子元件位置，進行兩者位置互換。

實現思路

  1. 在Grid元件中，透過editMode()開啟編輯模式、透過onItemDragStart()指定拖拽時樣式、透過onItemDrop()指定拖拽釋放時的行為。原始碼參考 https://gitee.com/harmonyos-cases/cases/blob/master/CommonAppDevelopment/feature/dragandexchange/src/main/ets/view/GridSceneView.ets
Grid() { ... }
.editMode(true) // 設定Grid進入編輯模式
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { // 設定拖拽過程中顯示的圖形
  this.movedItem = this.appInfoList[itemIndex]; // 記錄原位置子元件資訊
  return this.itemWhileDrag(); 
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { // 拖拽釋放時，觸發回撥
  // isSuccess=false時，說明drop的位置在grid外部；insertIndex > length時，說明有新增元素的事件發生
  if (isSuccess && insertIndex < this.appInfoList.length) {
    this.changeIndex(itemIndex, insertIndex); // 互換子元件index值
  }
})
  1. 在List元件中，透過ListItem的onDragStart()方法指定拖拽開始時的行為，透過List的onTouch()指定拖拽釋放時的行為。原始碼參考ListSceneView.ets。
List({ space: LIST_SPACE }) {
  ForEach(this.appInfoList, (item: AppInfo, index) => {
    ListItem() { ... }
    .onDragStart(() => {
      item.visible = false; // 拖拽時，設定子元件原位置圖示不可見
    })
    .onTouch((event: TouchEvent) => { // 拖拽釋放時，記錄目標位置子元件index值
      if (event.type === TouchType.Down) {
        this.dragIndex = index;
      }
    })
  })
}
.onDrop((event: DragEvent, extraParams: string) => {
  let jsonString: JsonObjType = JSON.parse(extraParams) as JsonObjType; // 透過引數extraParams獲取原位置子元件index值
  this.changeIndex(this.dragIndex, jsonString.insertIndex); // 互換子元件index值
  this.appInfoList[jsonString.insertIndex].visible = true; // 完成互換後，設定子元件原位置圖示不可見
})

高效能知識點

不涉及

模組依賴

@ohos/routermodule(動態路由)

工程結構&模組型別

dragandexchange                  // har型別               
|---pages                                       
|---|---Launcher.ets             // 頁面層-方案主頁面
|---view                                        
|---|---GridSceneView.ets        // 檢視層-Grid拖拽頁面             
|---|---ListSceneView.ets        // 檢視層-List拖拽頁面  
|---model                                     
|---|---AppInfo.ets              // 模型層-App資訊模型

參考資料

  1. 建立網格（Grid/GridItem）
  2. List

寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 想要獲取更多完整鴻蒙最新VIP學習資源，請移步前往小編：https://qr21.cn/FV7h05

相關文章