纯滑动事件处理拖拽

yuzhilin
Commit d2302f00249609b5bcb7b14bc28b5589bc0b2102 d2302f00 1 parent 8045b03d
Showing 2 changed files with 239 additions and 79 deletions
sight_harmony/features/wdComponent/src/main/ets/components/page/ChannelSubscriptionLayout.ets
sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/ChannelSubscriptionLayout.ets
View file @d2302f0
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/ChannelSubscriptionLayout.ets
View file @d2302f0
 import { TopNavDTO } from 'wdBean';
+import curves from '@ohos.curves';
 const INDEX_SETTING_TITLE: string = '首页设置'
 const INDEX_SETTING_SUBTITLE: string = '将指定频道设置为首页'
 const MY_CHANNEL: string = '我的频道'
 const EDIT_TEXT: string = '编辑'
 const EDIT_DOWN: string = '完成'
+const MY_CHANNEL_TIP1: string = '点击进入频道'
+const MY_CHANNEL_TIP2: string = '拖动调整频道顺序'
 const MORE_CHANNEL: string = '更多频道'
 const LOCAL_CHANNEL: string = '地方频道'
+
 @CustomDialog
 struct ChannelDialog {
+  @State dragItem: number = -1
+  @State item: number = -1
+  private dragRefOffsetX: number = 0
+  private dragRefOffsetY: number = 0
+  @State offsetX: number = 0
+  @State offsetY: number = 0
+  private FIX_VP_X: number = 80
+  private FIX_VP_Y: number = 48
   @State indexSettingTabIndex: number = 0
   @State isEditIng: boolean = false
+  @State currentTopNavSelectedItem: TopNavDTO = {} as TopNavDTO
   @Link currentTopNavSelectedIndex: number
   @Link myChannelList: TopNavDTO[]
   @Link moreChannelList: TopNavDTO[]
@@ -20,48 +33,153 @@ struct ChannelDialog {
   controller?: CustomDialogController
   confirm: (index: number) => void = () => {
   }
-  changeChannelIndex : (index1:number, index2:number) => void = ()=>{}
-  myChannelItemEditHandle = (index: number): void => {
-    let item = this.myChannelList.splice(index, 1)[0]
-    if (item.moreChannel === '1') {
-      this.moreChannelList.unshift(item)
-    }
-    if (item.localChannel === '1') {
-      this.localChannelList.unshift(item)
+  changeChannelIndex: (index1: number, index2: number) => void = () => {
+  }
+  delChannelItem: (index: number) => void = () => {
+  }
+  addChannelItem: (item: TopNavDTO) => void = () => {
+  }
+
+  aboutToAppear() {
+    this.currentTopNavSelectedItem = this.myChannelList[this.currentTopNavSelectedIndex]
+  }
+
+  itemMove(index: number, newIndex: number): void {
+    let targetItem = this.myChannelList[newIndex]
+    if (!(targetItem?.headlinesOn === 1 || targetItem?.movePermitted === 0 || targetItem?.homeChannel === '1')) {
+      this.changeChannelIndex(index, newIndex)
+      if (index <= this.currentTopNavSelectedIndex || newIndex <= this.currentTopNavSelectedIndex) {
+        // this.currentTopNavSelectedIndex = this.myChannelList.findIndex(ele => ele.channelId === currentTopNavSelectedItem.channelId)
+      }
     }
   }
-  @Builder
-  pixelMapBuilder(item: TopNavDTO, index: number) { //拖拽过程样式
-    Row() {
-      Row() {
-        Text(item.name)
-          .fontSize(14)
-          .fontColor(this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))
+  //向下滑
+  down(index: number): void {
+    console.info(`向下滑`)
+    this.offsetY -= this.FIX_VP_Y
+    this.dragRefOffsetY += this.FIX_VP_Y
+    this.itemMove(index, index + 4)
+  }
-        if (this.isEditIng && item.myChannel !== '1') {
-          Image($r('app.media.icon_audio_close'))
-            .width(12)
-            .margin({ left: 1 })
-        }
+  //向下滑(右下角为空)
+  down2(index: number): void {
+    this.offsetY -= this.FIX_VP_Y
+    this.dragRefOffsetY += this.FIX_VP_Y
+    this.itemMove(index, index + 4)
+  }
+
+  //向上滑
+  up(index: number): void {
+    console.info(`向上滑`)
+    this.offsetY += this.FIX_VP_Y
+    this.dragRefOffsetY -= this.FIX_VP_Y
+    this.itemMove(index, index - 4)
+  }
+
+  //向左滑
+  left(index: number): void {
+    console.info(`向左滑`)
+    this.offsetX += this.FIX_VP_X
+    this.dragRefOffsetX -= this.FIX_VP_X
+    this.itemMove(index, index - 1)
+  }
+
+  //向右滑
+  right(index: number): void {
+    console.info(`向右滑`)
+    this.offsetX -= this.FIX_VP_X
+    this.dragRefOffsetX += this.FIX_VP_X
+    this.itemMove(index, index + 1)
+  }
+
+  //向右下滑
+  lowerRight(index: number): void {
+    console.info(`向右下滑`)
+    this.offsetX -= this.FIX_VP_X
+    this.dragRefOffsetX += this.FIX_VP_X
+    this.offsetY -= this.FIX_VP_Y
+    this.dragRefOffsetY += this.FIX_VP_Y
+    this.itemMove(index, index + 5)
+  }
+
+  //向右上滑
+  upperRight(index: number): void {
+    console.info(`向右上滑`)
+    this.offsetX -= this.FIX_VP_X
+    this.dragRefOffsetX += this.FIX_VP_X
+    this.offsetY += this.FIX_VP_Y
+    this.dragRefOffsetY -= this.FIX_VP_Y
+    this.itemMove(index, index - 3)
+  }
+
+  //向左下滑
+  lowerLeft(index: number): void {
+    console.info(`向左下滑`)
+    this.offsetX += this.FIX_VP_X
+    this.dragRefOffsetX -= this.FIX_VP_X
+    this.offsetY -= this.FIX_VP_Y
+    this.dragRefOffsetY += this.FIX_VP_Y
+    this.itemMove(index, index + 3)
+  }
+
+  //向左上滑
+  upperLeft(index: number): void {
+    console.info(`向左上滑`)
+    this.offsetX += this.FIX_VP_X
+    this.dragRefOffsetX -= this.FIX_VP_X
+    this.offsetY += this.FIX_VP_Y
+    this.dragRefOffsetY -= this.FIX_VP_Y
+    this.itemMove(index, index - 5)
+  }
+
+  handleAnimationTo(item: TopNavDTO, event: GestureEvent) {
+    let index = this.myChannelList.findIndex(ele => ele.num === this.dragItem)
+    if (!(item.headlinesOn === 1 || item.movePermitted === 0 || item.homeChannel === '1') && this.isEditIng) {
+      this.offsetY = event.offsetY - this.dragRefOffsetY
+      this.offsetX = event.offsetX - this.dragRefOffsetX
+      if (this.offsetY >= this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44)
+      ) {
+        //向下滑
+        this.down(index)
+      } else if (this.offsetY <= -this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44)
+      ) {
+        //向上滑
+        this.up(index)
+      } else if (this.offsetX >= this.FIX_VP_X / 2 && (this.offsetY <= 20 && this.offsetY >= -20)
+      ) {
+        //向右滑
+        this.right(index)
+      } else if (this.offsetX <= -this.FIX_VP_X / 2 && (this.offsetY <= 20 && this.offsetY >= -20)
+      ) {
+        //向左滑
+        this.left(index)
+      } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
+      ) {
+        //向右下滑
+        this.lowerRight(index)
+      } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2
+      ) {
+        //向右上滑
+        this.upperRight(index)
+      } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
+      ) {
+        //向左下滑
+        this.lowerLeft(index)
+      } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2
+      ) {
+        //向左上滑
+        this.upperLeft(index)
+      } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2
+      ) {
+        //向右下滑(右下角为空)
+        this.down2(index)
       }
-      .width('100%')
-      .height('100%')
-      .justifyContent(FlexAlign.Center)
-      .backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
     }
-    .width('23%')
-    .height(40)
-    .border({
-      width: item.homeChannel === '1' ? 0 : 1,
-      color: '#EDEDED',
-      radius: 3
-    })
   }
   build() {
     Column() {
-
       Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
         Image($r('app.media.icon_ren_min_ri_bao'))
           .width(72)
@@ -73,7 +191,7 @@ struct ChannelDialog {
           })
       }
       .width('100%')
-      .padding({ top: 30, bottom: 10 })
+      .padding({ bottom: 10 })
       List() {
@@ -87,6 +205,7 @@ struct ChannelDialog {
             Text(INDEX_SETTING_SUBTITLE)
               .fontSize(12)
               .fontWeight(400)
+              .fontColor('#222222')
           }
           .width('100%')
           .margin({ top: 22, bottom: 16 })
@@ -128,9 +247,17 @@ struct ChannelDialog {
         ListItem() {
           Row() {
-            Text(MY_CHANNEL)
-              .fontSize(16)
-              .fontWeight(600)
+            Row() {
+              Text(MY_CHANNEL)
+                .fontSize(16)
+                .fontWeight(600)
+                .margin({ right: 4 })
+              Text(!this.isEditIng ? MY_CHANNEL_TIP1 : MY_CHANNEL_TIP2)
+                .fontSize(12)
+                .fontWeight(400)
+                .fontColor('#222222')
+            }
+
             Text(this.isEditIng ? EDIT_DOWN : EDIT_TEXT)
               .fontSize(14)
               .fontColor('#ED2800')
@@ -151,7 +278,7 @@ struct ChannelDialog {
                 Row() {
                   Text(item.name)
                     .fontSize(14)
-                    .fontColor(this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))
+                    .fontColor(this.currentTopNavSelectedItem.channelId === item.channelId ? '#ED2800' : (item.homeChannel === '1' || item.movePermitted === 0 ? '#999999' : '#222222'))
                   if (this.isEditIng && item.myChannel !== '1') {
                     Image($r('app.media.icon_audio_close'))
@@ -162,15 +289,14 @@ struct ChannelDialog {
                 .width('100%')
                 .height('100%')
                 .justifyContent(FlexAlign.Center)
-                .backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '')
+                .backgroundColor(item.homeChannel === '1' || item.movePermitted === 0 ? '#F5F5F5' : '#ffffff')
                 .onClick(() => {
                   if (this.isEditIng) {
                     if (item.myChannel !== '1') {
-                      this.myChannelItemEditHandle(index)
+                      this.delChannelItem(index)
                     }
                   } else {
                     this.confirm(index)
-                    this.currentTopNavSelectedIndex = index
                     this.controller?.close()
                   }
                 })
@@ -182,6 +308,33 @@ struct ChannelDialog {
                 color: '#EDEDED',
                 radius: 3
               })
+              .zIndex(this.dragItem == item.num ? 1 : 0)
+              .translate(this.dragItem == item.num ? { x: this.offsetX, y: this.offsetY } : { x: 0, y: 0 })
+              .gesture(
+                GestureGroup(GestureMode.Sequence,
+                  PanGesture({ fingers: 1, direction: null, distance: 0 })
+                    .onActionStart((event: GestureEvent) => {
+                      this.dragItem = item.num
+                      this.dragRefOffsetX = 0
+                      this.dragRefOffsetY = 0
+                    })
+                    .onActionUpdate((event: GestureEvent) => {
+                      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
+                        this.handleAnimationTo(item, event)
+                      })
+                    })
+                    .onActionEnd((event: GestureEvent) => {
+                      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
+                        this.dragItem = -1
+                      })
+                    })
+                )
+                  .onCancel(() => {
+                    animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
+                      this.dragItem = -1
+                    })
+                  }))
+
             }, (item: TopNavDTO) => JSON.stringify(item))
           }
           .width('100%')
@@ -189,22 +342,7 @@ struct ChannelDialog {
           .columnsTemplate('1fr 1fr 1fr 1fr')
           .columnsGap(8)
           .rowsGap(8)
-          .height(Math.ceil(this.myChannelList.length / 4 ) * 48)
-          .editMode(this.isEditIng)
-          .supportAnimation(true) //设置Grid是否开启拖拽补位动画
-          .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
-            if(this.myChannelList[itemIndex].headlinesOn===1 || this.myChannelList[itemIndex].movePermitted===0){
-              return
-            }else{
-              return this.pixelMapBuilder(this.myChannelList[itemIndex], itemIndex) //设置拖拽过程中显示的元素。
-            }
-          })
-          .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调。
-            if (!isSuccess || insertIndex >= this.myChannelList.length || this.myChannelList[insertIndex].headlinesOn===1 || this.myChannelList[insertIndex].movePermitted===0) {
-              return
-            }
-            this.changeChannelIndex(itemIndex,insertIndex)
-          })
+          .height(Math.ceil(this.myChannelList.length / 4) * 48)
         }
         //更多频道列表
@@ -233,7 +371,7 @@ struct ChannelDialog {
                   .width('100%').height('100%')
                   .justifyContent(FlexAlign.Center)
                   .onClick(() => {
-                    this.myChannelList.push(this.moreChannelList.splice(index, 1)[0])
+                    this.addChannelItem(this.moreChannelList.splice(index, 1)[0])
                   })
                 }
                 .width(80)
@@ -277,7 +415,7 @@ struct ChannelDialog {
                   .width('100%').height('100%')
                   .justifyContent(FlexAlign.Center)
                   .onClick(() => {
-                    this.myChannelList.push(this.localChannelList.splice(index, 1)[0])
+                    this.addChannelItem(this.localChannelList.splice(index, 1)[0])
                   })
                 }
                 .width(80)
@@ -295,9 +433,8 @@ struct ChannelDialog {
         }
       }.width('100%').height('100%')
-
     }
-    .padding(15)
+    .padding({ top: 40, right: 15, bottom: 20, left: 15 })
     .backgroundColor('#ffffff')
   }
 }
@@ -305,18 +442,42 @@ struct ChannelDialog {
 // @Entry
 @Component
 struct ChannelSubscriptionLayout {
-  changeTab: (index: number) => void = () => {
-  }
   @State indexSettingArray: string [] = ['推荐', '热点']
   //当前选中的频道
   @Link currentTopNavSelectedIndex: number;
   @Link myChannelList: TopNavDTO []
   @Link moreChannelList: TopNavDTO []
   @Link localChannelList: TopNavDTO []
+  @Link @Watch('onChannelIdsUpdate') channelIds: number []
+  changeTab: (index: number) => void = () => {
+  }
+  //频道弹窗点击切换频道
   onAccept = (index: number) => {
-    console.log(`onAccept${index}`)
     this.changeTab(index)
   }
+  //交换我的频道数组中的位置
+  changeChannelIndex = (index1: number, index2: number) => {
+    let tmp = this.myChannelList.splice(index1, 1)
+    let channelIdTmp = this.channelIds.splice(index1, 1)
+    this.myChannelList.splice(index2, 0, tmp[0])
+    this.channelIds.splice(index2, 0, channelIdTmp[0])
+  }
+  //删除频道
+  delChannelItem = (index: number) => {
+    let item = this.myChannelList.splice(index, 1)[0]
+    this.channelIds.splice(index, 1)
+    if (item.moreChannel === '1') {
+      this.moreChannelList.unshift(item)
+    }
+    if (item.localChannel === '1') {
+      this.localChannelList.unshift(item)
+    }
+  }
+  // 添加频道
+  addChannelItem = (item: TopNavDTO) => {
+    this.channelIds.push(item.channelId)
+    this.myChannelList.push(item)
+  }
   // @State currentTopNavSelectedIndex: number = 0
   // @State topNavList: TopNavDTO [] = [
   //   {
@@ -1831,22 +1992,14 @@ struct ChannelSubscriptionLayout {
       moreChannelList: $moreChannelList,
       localChannelList: $localChannelList,
       confirm: this.onAccept,
-      changeChannelIndex: this.changeChannelIndex
+      changeChannelIndex: this.changeChannelIndex,
+      delChannelItem: this.delChannelItem,
+      addChannelItem: this.addChannelItem
     }),
     alignment: DialogAlignment.TopEnd,
     customStyle: true,
   })
-  changeChannelIndex(index1:number, index2:number) { //交换数组中的位置
-    const temp = this.myChannelList[index1];
-    if (index1 > index2) {
-      this.myChannelList.splice(index2, 0, temp);
-      this.myChannelList.splice(index1 + 1, 1);
-    } else {
-      this.myChannelList.splice(index2 + 1, 0, temp);
-      this.myChannelList.splice(index1, 1);
-    }
-  }
   // topNavListHandle() {
   //   let defaultMyChannelList: TopNavDTO[] = []
   //   let handledTopNavList = [...this.topNavList]
@@ -1896,8 +2049,13 @@ struct ChannelSubscriptionLayout {
   //   })
   // }
+  onChannelIdsUpdate(){
+    AppStorage.SetOrCreate('channelIds', this.channelIds.join(','));
+    console.log(`AppStorage.get('channelIds')${AppStorage.get('channelIds')}`)
+  }
   aboutToAppear() {
+    console.log(`myChannelListzz${this.channelIds}}`)
     // this.topNavListHandle()
   }
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
View file @d2302f0
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponent.ets
View file @d2302f0
@@ -68,6 +68,7 @@ export struct TopNavigationComponent {
       if (item.myChannel === '1') {
         this.myChannelList.push(item)
+        this.channelIds.push(item.channelId)
       }
       if (item.moreChannel === '1') {
         this.moreChannelList.push(item)
@@ -81,6 +82,7 @@ export struct TopNavigationComponent {
   isBroadcast (item: TopNavDTO) {
     return item.name === '播报'
   }
+
   build() {
     Column() {
       // 顶部搜索、日报logo、早晚报
@@ -208,15 +210,15 @@ export struct TopNavigationComponent {
         })
         // 分类列表最右侧频道设置
         ChannelSubscriptionLayout({
-          changeTab: (index) => {
-            this.tabsController.changeIndex(index)
-          },
+          currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
           myChannelList: $myChannelList,
           moreChannelList: $moreChannelList,
           localChannelList: $localChannelList,
-          currentTopNavSelectedIndex: $currentTopNavSelectedIndex
+          channelIds: $channelIds,
+          changeTab: (index) => {
+            this.tabsController.changeIndex(index)
+          }
         })
-        // ChannelSubscriptionLayout()
       }
     }