HarmonyOS 当在子组件绑定PanGesture时,在子组件区域进行滑动只能触发子组件的PanGesture

希望提供当在子组件绑定PanGesture时,在子组件区域进行滑动能够根据动态的值判断是否执行手势绑定的方法。

例如附件中的场景,点击编辑 isEditing = true, 此时可以拖动元素进行排序;点击完成 isEditing = false;在元素上滑动不影响滑动列表。

HarmonyOS 当在子组件绑定PanGesture时,在子组件区域进行滑动只能触发子组件的PanGesture-鸿蒙开发者社区

HarmonyOS
2024-10-21 11:28:13
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

请参考以下demo看是否满足需求:

import curves from '@ohos.curves';  
@Entry  
@Component  
struct GridItemExample {  
  @State numbers: number[] = []  
  @State dragItem: number = -1  
  @State isEditing : Boolean = false  
  @State scaleItem: 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 = 108  
  private FIX_VP_Y: number = 120  
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12,13,14,15,16,17,18,19,20]  
  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical })  
  aboutToAppear() {  
    for (let i = 1; i <= 30; i++) {  
      this.numbers.push(i)  
    }  
  }  
  itemMove(index: number, newIndex: number): void {  
    let tmp = this.numbers.splice(index, 1)  
    this.numbers.splice(newIndex, 0, tmp[0])  
  }  
  //向下滑  
  down(index: number): void {  
    this.offsetY -= this.FIX_VP_Y  
    this.dragRefOffsety += this.FIX_VP_Y  
    this.itemMove(index, index + 3)  
  }  
  //向下滑(右下角为空)  
  down2(index: number): void {  
    this.offsetY -= this.FIX_VP_Y  
    this.dragRefOffsety += this.FIX_VP_Y  
    this.itemMove(index, index + 3)  
  }  
  //向上滑  
  up(index: number): void {  
    this.offsetY += this.FIX_VP_Y  
    this.dragRefOffsety -= this.FIX_VP_Y  
    this.itemMove(index, index - 3)  
  }  
  //向左滑  
  left(index: number): void {  
    this.offsetX += this.FIX_VP_X  
    this.dragRefOffsetx -= this.FIX_VP_X  
    this.itemMove(index, index - 1)  
  }  
  //向右滑  
  right(index: number): void {  
    this.offsetX -= this.FIX_VP_X  
    this.dragRefOffsetx += this.FIX_VP_X  
    this.itemMove(index, index + 1)  
  }  
  //向右下滑  
  lowerRight(index: number): void {  
    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 + 4)  
  }  
  //向右上滑  
  upperRight(index: number): void {  
    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 - 2)  
  }  
  //向左下滑  
  lowerLeft(index: number): void {  
    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 + 2)  
  }  
  //向左上滑  
  upperLeft(index: number): void {  
    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 - 4)  
  }  
  build() {  
    List() {  
      ListItem(){  
        Button('isEdit').onClick((event: ClickEvent) => {  
          this.isEditing=!this.isEditing  
          console.log('wyTest',this.isEditing)  
        })  
          .width(100)  
          .height(100)  
          .backgroundColor('blue')  
      }  
      ListItem() {  
        Column() {  
          Grid() {  
            ForEach(this.numbers, (item: number) => {  
              GridItem() {  
                Text(item + '')  
                  .fontSize(16)  
                  .width('100%')  
                  .textAlign(TextAlign.Center)  
                  .height(100)  
                  .borderRadius(10)  
                  .backgroundColor(0xFFFFFF)  
                  .shadow(this.scaleItem == item ? { radius: 70, color: '#15000000', offsetX: 0, offsetY: 0 } :  
                    { radius: 0, color: '#15000000', offsetX: 0, offsetY: 0 })  
                  .animation({ curve: Curve.Sharp, duration: 300 })  
              }  
              .scale({ x: this.scaleItem == item ? 1.05 : 1, y: this.scaleItem == item ? 1.05 : 1 })  
              .zIndex(this.dragItem == item ? 1 : 0)  
              .translate(this.dragItem == item ? { x: this.offsetX, y: this.offsetY } : { x: 0, y: 0 })  
              .padding(10)  
              .parallelGesture(  
                PanGesture({ fingers: 1, direction: this.isEditing ? PanDirection.All:PanDirection.None, distance: 0 })  
                  .onActionStart(() => {  
                    console.log('wyTest onActionStart')  
                    if (this.isEditing) {  
                      this.dragItem = item  
                      this.dragRefOffsetx = 0  
                      this.dragRefOffsety = 0  
                    }  
                  })  
                  .onActionUpdate((event: GestureEvent) => {  
                    console.log('wyTest onActionUpdate')  
                    if (this.isEditing) {  
                      this.offsetY = event.offsetY - this.dragRefOffsety  
                      this.offsetX = event.offsetX - this.dragRefOffsetx  
                      console.log('X:' + this.offsetX.toString())  
                      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {  
                        let index = this.numbers.indexOf(this.dragItem)  
                        if (this.offsetY >= this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44)  
                          && ![8, 9, 10].includes(index)) {  
                          //向下滑  
                          this.down(index)  
                        } else if (this.offsetY <= -this.FIX_VP_Y / 2 && (this.offsetX <= 44 && this.offsetX >= -44)  
                          && ![0, 1, 2].includes(index)) {  
                          //向上滑  
                          this.up(index)  
                        } else if (this.offsetX >= this.FIX_VP_X / 2 && (this.offsetY <= 50 && this.offsetY >= -50)  
                          && ![2, 5, 8, 10].includes(index)) {  
                          //向右滑  
                          this.right(index)  
                        } else if (this.offsetX <= -this.FIX_VP_X / 2 && (this.offsetY <= 50 && this.offsetY >= -50)  
                          && ![0, 3, 6, 9].includes(index)) {  
                          //向左滑  
                          this.left(index)  
                        } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2  
                          && ![2, 5, 7, 8, 9, 10].includes(index)) {  
                          //向右下滑  
                          this.lowerRight(index)  
                        } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2  
                          && ![0, 1, 2, 5, 8].includes(index)) {  
                          //向右上滑  
                          this.upperRight(index)  
                        } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2  
                          && ![0, 3, 6, 9, 10].includes(index)) {  
                          //向左下滑  
                          this.lowerLeft(index)  
                        } else if (this.offsetX <= -this.FIX_VP_X / 2 && this.offsetY <= -this.FIX_VP_Y / 2  
                          && ![0, 1, 2, 3, 6, 9].includes(index)) {  
                          //向左上滑  
                          this.upperLeft(index)  
                        } else if (this.offsetX >= this.FIX_VP_X / 2 && this.offsetY >= this.FIX_VP_Y / 2  
                          && [7].includes(index)) {  
                          //向右下滑(右下角为空)  
                          this.down2(index)  
                        }  
                      })  
                    }  
                  })  
                  .onActionEnd(() => {  
                    console.log('wyTest onActionEnd')  
                    if (this.isEditing) {  
                      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {  
                        this.dragItem = -1  
                      })  
                      animateTo({  
                        curve: curves.interpolatingSpring(14, 1, 170, 17), delay: 150  
                      }, () => {  
                        this.scaleItem = -1  
                      })  
                    }  
                  })  
              )  
            }, (item: number) => item.toString())  
          }  
          .width('90%')  
          .editMode(true)  
          .scrollBar(BarState.Off)  
          .columnsTemplate("1fr 1fr 1fr")  
        }  
          .width('100%')  
          .height('100%').backgroundColor('#0D182431').padding({ top: 5 })  
      }  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-21 16:01:53
相关问题
HarmonyOS Tabs组件组件问题
336浏览 • 1回复 待解决
组件调用组件方法
1211浏览 • 1回复 待解决
组件调用父组件方法
234浏览 • 1回复 待解决
设置组件宽度不超出父组件
539浏览 • 1回复 待解决
组件事件可以传到父组件
601浏览 • 1回复 待解决
HarmonyOS list控件组件复用
294浏览 • 1回复 待解决
组件组件传递函数
234浏览 • 1回复 待解决
HarmonyOS 想调用组件方法
354浏览 • 1回复 待解决
HarmonyOS TabContent无法套用在组件
242浏览 • 1回复 待解决