HarmonyOS 鸿蒙Next中在使用拖拽onDragStart时怎么控制拖拽缩率图的层级，保证拖拽缩率图在底部导航栏或某个固定区域的的下面去？

HarmonyOS 鸿蒙Next中在使用拖拽onDragStart时怎么控制拖拽缩率图的层级，保证拖拽缩率图在底部导航栏或某个固定区域的的下面去？ image

@ComponentV2
export struct Drag {
  @Local dataList: Array<number> = []
  @Local dragData: number | null = null
  @Local angle: number = 0

  aboutToAppear(): void {
    for (let index = 0; index < 100; index++) {
      this.dataList.push(index)
    }
  }

  startAnimation() {
    this.angle = -2
    this.getUIContext().animateTo({
      duration: 200,
      curve: Curve.Linear,
      playMode: PlayMode.Alternate,
      iterations: -1
    }, () => {
      this.angle = 2
    })
  }

  build() {
    Column() {
      Text(this.dragData + '').onClick(()=> {
        this.startAnimation()
      })
      Grid() {
        ForEach(this.dataList, (item: number) => {
          GridItem() {
            // 将 rotate 移到内层容器
            Column() {
              Text(item + '')
            }
            .width('100%')
            .height('100%')
            .border({
              color: 'red',
              width: 1
            })
            .justifyContent(FlexAlign.Center)
            .backgroundColor(this.dragData===item?'red': '#ffffff')
            .rotate({
              z: 1,
              angle: this.angle
            })
          }
          .height(80)
          .visibility(item === this.dragData ? Visibility.Hidden : Visibility.Visible)
          .onDragStart((event?: DragEvent, extraParams?: string) => {
            this.dragData = item
          })
          .onDragEnd((event?: DragEvent, extraParams?: string) => {
            this.dragData = null
          })
          .onDrop((event?: DragEvent, extraParams?: string) => {
          })
        })
      }
      .columnsTemplate('1fr 1fr')
      .columnsGap(12)
      .rowsGap(12)
      .padding(12)
      .backgroundColor(Color.Orange)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中在使用拖拽onDragStart时怎么控制拖拽缩率图的层级，保证拖拽缩率图在底部导航栏或某个固定区域的的下面去？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

鸿蒙 ArkTS 的 UI 组件层级通过 zIndex 属性控制，且拖拽时的缩略图（DragShadow）默认层级较高，需手动覆盖配置：

核心步骤：

  1. 给底部导航栏设置 更高的 zIndex（如 100）；
  2. 在 onDragStart 中自定义拖拽缩略图，显式设置其 zIndex 为 低于导航栏（如 50 或负数）；
  3. 确保拖拽元素的父容器没有设置 overflow: hidden（避免层级失效）。

更多关于HarmonyOS 鸿蒙Next中在使用拖拽onDragStart时怎么控制拖拽缩率图的层级，保证拖拽缩率图在底部导航栏或某个固定区域的的下面去？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不行啦，貌似拖拽元素的优先级就是最高的，都设置zIndex为-1了，还是最上面，

那只能试禁用默认缩略图 + 自定义可控制层级的拖拽预览。通过 onDragStart 的返回值自定义拖拽预览，

就是试的自定义拖拽也不行，

在HarmonyOS Next中，通过onDragStart事件设置拖拽预览图层级时，使用PixelMap的setRenderEffect()方法结合RenderEffect.createBlurEffect()添加模糊效果，并配合setScale()调整缩放比例。通过WindowManager的addWindow()方法配置窗口参数，设置type为TYPE_DRAG_LAYER，zOrder为Z_ORDER_BELOW，确保拖拽缩率图位于底部导航栏下方。在自定义拖拽控制器中重写onDrawShadow()方法，使用Canvas绘制指定层级的缩率图。

在HarmonyOS Next中，可以通过设置拖拽预览图的zIndex属性来控制其层级。在onDragStart事件中，使用setDragPreview方法自定义拖拽预览图，并设置较低的zIndex值（如-1），确保其显示在底部导航栏或其他固定区域下方。

示例代码：

.onDragStart((event?: DragEvent, extraParams?: string) => {
  this.dragData = item
  // 设置拖拽预览图的层级
  event?.setDragPreview({
    builder: () => {
      return Text(item + '').backgroundColor('#ffffff')
    },
    zIndex: -1  // 设置较低的zIndex值
  })
})

这样设置后，拖拽缩率图将显示在底部导航栏的下方，避免遮挡固定区域。

回到顶部