1. Harmony開發 List、Grid拖動自定義排序實現
1.1. List拖動功能
??本示例基于顯式動畫、List組件實現了ListItem的上下拖動、ListItem切換以及ListItem插入的效果。
??實現思路:List手勢拖動
@Entry
@Component
struct ListDragPage {@State private arr: string[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].map((value) => value.toString())private listScroller: ListScroller = new ListScroller();private dragIndex: number = -1private originDragIndex: number = -1@State itemOffsetList: number[] = []private itemHeight: number = 100private listMargin: number = 10private itemTotalHeight: number = 110// dragItem距離List組件頂部的距離private dragOffsetY: number = 0// dragItem相對于List滾動頂部的距離private relativeOffsetY: number = 0// List組件能滑動的最大距離listMaxScrollOffsetY: number = 0// List組件開始拖動時的偏移originListOffsetY: number = 0// list組件規格private listArea: Area = {width: 0,height: 0,position: {},globalPosition: {}}aboutToAppear(): void {this.itemOffsetList = new Array<number>(this.arr.length)}initState() {for (let i = 0; i < this.itemOffsetList.length; i++) {this.itemOffsetList[i] = 0}this.dragIndex = -1this.originDragIndex = -1this.dragOffsetY = 0this.originListOffsetY = this.listScroller.currentOffset().yOffset}startDragItem(dragIndex: number) {this.initState()animateTo({ curve: Curve.Linear }, () => {this.dragIndex = dragIndexthis.originDragIndex = dragIndex})}increaseDragIndex(eventOffsetY: number) {let tmp = this.arr.splice(this.dragIndex, 1)this.arr.splice(this.dragIndex + 1, 0, tmp[0])this.dragIndex = this.dragIndex + 1this.itemOffsetList[this.dragIndex] =eventOffsetY - (this.dragIndex - this.originDragIndex) * this.itemTotalHeight +this.listScroller.currentOffset().yOffset - this.originListOffsetYthis.itemOffsetList[this.dragIndex - 1] = this.itemTotalHeightanimateTo({ curve: Curve.Sharp, duration: 100 }, () => {this.itemOffsetList[this.dragIndex - 1] = 0})}decreaseDragIndex(eventOffsetY: number) {let tmp = this.arr.splice(this.dragIndex, 1)this.arr.splice(this.dragIndex - 1, 0, tmp[0])this.dragIndex = this.dragIndex - 1this.itemOffsetList[this.dragIndex] =eventOffsetY - (this.dragIndex - this.originDragIndex) * this.itemTotalHeight +this.listScroller.currentOffset().yOffset - this.originListOffsetYthis.itemOffsetList[this.dragIndex + 1] = -this.itemTotalHeightanimateTo({ curve: Curve.Sharp, duration: 100 }, () => {this.itemOffsetList[this.dragIndex + 1] = 0})}cancelDrag() {this.initState()}endDragItem() {animateTo({ curve: Curve.Sharp, duration: 100 }, () => {this.initState()})}build() {Column() {List({ space: this.listMargin
)
)
