HarmonyOS 鸿蒙Next排序使用什么组件

官方没有现成的组件，可以参照下面代码自定义组件去完成此功能

import curves from '@ohos.curves';
import animator, { AnimatorResult } from '@ohos.animator';

class ListItemModify implements AttributeModifier<ListItemAttribute> {
  public hasShadow: boolean = false
  public scale: number = 1
  public offsetY: number = 0
  private scroll: ListScroller = new ListScroller()
  public color:string = '#00000000'
  applyNormalAttribute(instance: ListItemAttribute): void {
    if (this.hasShadow) {
      instance.shadow({ radius: 70, color: this.color, offsetX: 0, offsetY: 0 })
      instance.zIndex(1)
    }
    instance.scale({ x: this.scale, y: this.scale })
    instance.translate({ y: this.offsetY })
  }
}

enum DragSortState {
  IDLE,
  PRESSING,
  MOVING,
  DROPPING,
}

@Observed
class DragSortCtrl<T> {
  private arr: Array<T>
  private modify: Array<ListItemModify>
  private dragRefOffset: number = 0
  offsetY: number = 0
  state:DragSortState = DragSortState.IDLE
  private ITEM_INTV: number = 120
  constructor(arr:Array<T>, intv:number) {
    this.arr = arr;
    this.modify = new Array<ListItemModify>()
    this.ITEM_INTV = intv
    arr.forEach(()=>{
      this.modify.push(new ListItemModify())
    })
  }
  itemMove(index: number, newIndex: number): void {
    let tmp = this.arr.splice(index, 1)
    this.arr.splice(newIndex, 0, tmp[0])
    let tmp2 = this.modify.splice(index, 1)
    this.modify.splice(newIndex, 0, tmp2[0])
  }
  onLongPress(item: T): void {
    let index = this.arr.indexOf(item)
    this.dragRefOffset = 0
    animateTo({ curve: Curve.Friction, duration: 300 }, () => {
      this.state = DragSortState.PRESSING
      this.modify[index].hasShadow = true
      this.modify[index].color ='#15000000'
      this.modify[index].scale = 1.05
    })
  }
  onDrop(item: T):void {
    let index = this.arr.indexOf(item)
    animateTo({ duration: 300, curve: Curve.Sharp }, () => {
      this.modify[index].color = '#00000000'
      this.modify[index].hasShadow = false
      if (index < this.modify.length - 1) {
        this.modify[index + 1].scale = 1;
      }
      if (index > 0) {
        this.modify[index - 1].scale = 1;
      }
    })
    animateTo({curve: curves.interpolatingSpring(14, 1, 170, 17)}, () => {
      this.state = DragSortState.IDLE
      this.modify[index].scale = 1
    })
  }
  onMove(item: T, offset: number) {
    this.state = DragSortState.MOVING
    this.offsetY = offset - this.dragRefOffset
    let index = this.arr.indexOf(item)
    this.modify[index].offsetY = this.offsetY
    let curveValue = curves.initCurve(Curve.Sharp)
    if (this.offsetY < 0) {
      let value = curveValue.interpolate(-this.offsetY / this.ITEM_INTV)
      if (index < this.modify.length - 1) {
        this.modify[index + 1].scale = 1;
      }
      if (index > 0) {
        this.modify[index - 1].scale = 1 - value / 20;
      }
    } else if (this.offsetY > 0) {
      let value = curveValue.interpolate(this.offsetY / this.ITEM_INTV)
      if (index < this.modify.length - 1) {
        this.modify[index + 1].scale = 1 - value / 20;
      }
      if (index > 0) {
        this.modify[index - 1].scale = 1;
      }
    }
    if (this.offsetY > this.ITEM_INTV / 2) {
      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
        this.offsetY -= this.ITEM_INTV
        this.dragRefOffset += this.ITEM_INTV
        this.modify[index].offsetY = this.offsetY
        this.itemMove(index, index + 1)
      })
    } else if (this.offsetY < -this.ITEM_INTV / 2) {
      animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
        this.offsetY += this.ITEM_INTV
        this.dragRefOffset -= this.ITEM_INTV
        this.modify[index].offsetY = this.offsetY
        this.itemMove(index, index - 1)
      })
    }
  }
  getModify(item:T):ListItemModify {
    let index = this.arr.indexOf(item)
    return this.modify[index]
  }
}

@Entry
@Component
struct ListAutoSortExample {
  @State private arr: Array<number> = [0, 1, 2, 3, 4, 5]
  @State dragSortCtrl: DragSortCtrl<number> = new DragSortCtrl<number>(this.arr, 120)
  private listScroll: ListScroller = new ListScroller()
  private backAnimator: AnimatorResult | null= null
  private dropFlag: Boolean = true
  @Builder
  itemEnd(item: number) {
    Row () {
      Button("To TOP").margin("4vp").onClick(() => {
        this.listScroll.closeAllSwipeActions({
          onFinish: () => {
            setTimeout(() => {
              let _this = this
              this.dropFlag = true
              this.dragSortCtrl.onLongPress(item)
              let length = 120 * this.arr.indexOf(item)
              this.backAnimator = animator.create({
                duration: 0,
                easing: "interpolating-spring(0, 1, 150, 24)",
                delay: 0,
                fill: "none",
                direction: "normal",
                iterations: 1,
                begin: 0,
                end: - length
              })
              this.backAnimator.onframe = (value) => {
                this.dragSortCtrl.onMove(item, value)
                if (Math.abs(value + length) < 50 && this.dropFlag){
                  this.dropFlag = false
                  this.dragSortCtrl.onDrop(item)
                }
              }
              this.backAnimator.onfinish = () => {
                this.dropFlag = true
              }
              this.backAnimator.play()
            })
          }
        })
      })
    }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
  }
  
  build() {
    Row() {
      Column(){
        List({ space: 20, scroller: this.listScroll }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .borderRadius(10)
                .textAlign(TextAlign.Center)
                .backgroundColor(0xFFFFFF)
            }
            .swipeAction({
              end:this.itemEnd(item)
            })
            .clip(true)
            .attributeModifier(this.dragSortCtrl.getModify(item))
            .borderRadius(10)
            .margin({ left: 20, right: 20 })
          }, (item: number) => item.toString())
        }
        .padding({top:20})
        .height("100%")
      }
    }.backgroundColor(0xDCDCDC)
  }
}