HarmonyOS 鸿蒙Next 列表条目拖动

伙伴您好，标签自由拖动可以参考以下demo： @Entry @Component struct Index { @State numbers: String[] = [“娱乐”, “关注”, “热榜”, “航天”, “动漫”, “宠物”, “保险”, “NBA”, “汽车”, “财经”, “体育”, “女性”, “搞笑”, “军事”, “有料”, “北京”, “深度”, “5G”] scroller: Scroller = new Scroller() @State text: string = ‘drag’ @State isShowDelete: boolean = false @State isEdit: boolean = false @State rotateZ: number = 0;

private stopJump() { animateTo({ delay: 0, tempo: 5, duration: 0, curve: Curve.Smooth, playMode: PlayMode.Normal, iterations: 1 }, () => { this.rotateZ = 0; }) }

//抖动的动画 private jumpWithSpeed(speed: number) { if (this.isEdit) { this.rotateZ = -1; animateTo({ delay: 0, //延时播放 tempo: speed, //动画的播放速度，值越大动画播放越快 duration: 2000, //动画持续的时间 curve: Curve.Smooth, //动画曲线 playMode: PlayMode.Normal, //动画播放模式 iterations: -1 }, () => { this.rotateZ = 1; }) } else { this.stopJump() } }

//拖拽过程中展示的样式 @Builder pixelMapBuilder() { Column() { Text(this.text) .fontSize(16) .backgroundColor(0xF9CF93) .width(80) .height(40) .textAlign(TextAlign.Center) .borderRadius(20) .borderWidth(2) .borderColor(Color.Orange) }

//改变数组中元素位置 changeIndex(index1: number, index2: number) { this.numbers.splice(index2, 0, this.numbers.splice(index1, 1)[0])

}

build() { Column({ space: 5 }) { Row({ space: 30 }) { Text(“我的频道”) .fontSize(20) Text(this.isEdit ? “长按拖动调整顺序” : “点击编辑按钮进入编辑”) .fontColor(Color.Gray) Button() { Text(this.isEdit ? “完成” : “编辑”) .fontColor(this.isEdit ? Color.Black : 0xF19510 ) }.width(80) .height(30) .backgroundColor(Color.White) .onClick(() => { this.isEdit = !this.isEdit this.jumpWithSpeed(5) }) }.padding({ left: 15 })

  Grid(this.scroller) {
    ForEach(this.numbers, (day: string, index: number) => {
      GridItem() {
        Stack({ alignContent: Alignment.TopEnd }) {
          Text(day)
            .borderRadius(20)
            .borderWidth(2)
            .borderColor(Color.Orange)
            .fontSize(16)
            .backgroundColor(0xF9CF93)
            .width(80)
            .height(40)
            .textAlign(TextAlign.Center)
            .onTouch((event: TouchEvent) => {
              if (event.type === TouchType.Down) {
                this.text = day

              }
            })
          if (this.isEdit) {
            Image($r('app.media.close'))
              .width(20)
              .height(20)
              .onClick(() => {
                animateTo({ duration: 300 }, () => {
                  this.numbers.splice(index, 1)
                })
                this.stopJump()

                this.jumpWithSpeed(5)
              })
          }
        }
        .rotate({ z: this.rotateZ,
          angle: 0.4,
          centerX: 0.5,
          centerY: 0.5
        })
      }
      .transition({ type: TransitionType.All, translate: { x: 100 }, scale: { x: 1, y: 1 } })
      .padding({ top: 15 })
    })
  }
  .columnsTemplate('1fr 1fr 1fr')
  .columnsGap(10)
  .rowsGap(10)
  .onScrollIndex((first: number) => {
    console.info(first.toString())
  })
  .margin({ top: 5 })
  .width('100%')
  .backgroundColor(0xFAEEE0)
  .height('100%')
  .supportAnimation(true) //是否支持动画
  //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
  .editMode(this.isEdit)
  //第一次拖拽此事件绑定的组件时，触发回调
  .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
    //设置拖拽过程中显示的图片
    return this.pixelMapBuilder()
  })
  //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调
  //itemIndex为拖拽起始位置，insertIndex为拖拽插入位置
  .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
    //不支持拖拽到已有内容以外的位置
    if (insertIndex < this.numbers.length) {
      this.changeIndex(itemIndex, insertIndex)
      this.stopJump()
      this.jumpWithSpeed(5)
    }
  })
}.width('100%')
.margin({ top: 5 })
.alignItems(HorizontalAlign.End)

} }