HarmonyOS 鸿蒙Next 能否协助提供List拖动排序示例,目前实现太过生硬
HarmonyOS 鸿蒙Next 能否协助提供List拖动排序示例,目前实现太过生硬 能否协助提供List拖动排序示例,目前实现太过生硬
2 回复
请参考以下demo:
import curves from '@ohos.curves';
@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: 1000, //动画持续的时间
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 : 0xF9CF93)
}.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)
}
更多关于HarmonyOS 鸿蒙Next 能否协助提供List拖动排序示例,目前实现太过生硬的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS 鸿蒙Next在提供UI组件和交互功能时,确实支持List的拖动排序。要实现更为流畅的拖动排序效果,你可以考虑以下方向进行操作:
鸿蒙系统的ArkUI框架(使用TypeScript或eTS语言)为开发者提供了丰富的UI组件和交互能力,其中就包括List组件。对于List的拖动排序,鸿蒙系统提供了一些内置的拖动事件处理机制,如onDrag
、onDragStart
、onDragEnd
等,这些事件可以帮助你捕捉用户的拖动行为,并据此调整List中的项顺序。
为了实现更为流畅的拖动排序,你可以:
- 利用上述拖动事件,精确捕捉用户的拖动起始、移动和结束位置。
- 在用户拖动过程中,动态调整List中项的位置,以反映当前的拖动状态。
- 使用动画效果,如平滑移动、淡入淡出等,来增强拖动排序的视觉体验。
- 确保拖动排序逻辑处理高效,避免界面卡顿。
鸿蒙系统提供了丰富的API和组件,开发者可以充分利用这些资源,结合具体需求,实现更为自然、流畅的List拖动排序效果。
如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html