HarmonyOS Grid拖拽动画问题
下面的demo,实现了部分item不响应拖拽,但动画有有问题,会挤在一起
// 请参考如下Demo
@Entry
@Component
struct GridExample {
@State numbers: string[] = []
scroller: Scroller = new Scroller()
layoutOptions1: GridLayoutOptions = {
regularSize: [1, 1], // 只支持[1, 1]
irregularIndexes: [0], // 索引为0的GridItem占用一行
}
@State text: string = 'drag'
@Builder pixelMapBuilder() { //拖拽过程样式
Column() {
Text(this.text)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width(80)
.height(80)
.textAlign(TextAlign.Center)
}
}
aboutToAppear() {
for (let i = 1;i <= 9; i++) {
this.numbers.push(i + '')
}
}
changeIndex(index1:number, index2:number) { //交换数组中的位置
const temp = this.numbers[index1];
if (index1 > index2) {
this.numbers.splice(index2, 0, temp);
this.numbers.splice(index1 + 1, 1);
} else {
this.numbers.splice(index2 + 1, 0, temp);
this.numbers.splice(index1, 1);
}
}
build() {
Column({ space: 5 }) {
Grid(this.scroller, this.layoutOptions1) {
ForEach(this.numbers, (day: string) => {
GridItem() {
if (day == "1") {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width("100%")
.height(80)
.textAlign(TextAlign.Center)
} else {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width(80)
.height(80)
.textAlign(TextAlign.Center)
}
}
})
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width('100%')
.backgroundColor(0xFAEEE0)
.height(300)
.supportAnimation(true)
.editMode(true) //设置Grid是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部GridItem
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件绑定的组件时,触发回调。
if (itemIndex == 0) {
return;
}
this.text = this.numbers[itemIndex]
return this.pixelMapBuilder() //设置拖拽过程中显示的图片。
})
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //绑定此事件的组件可作为拖拽释放目标,当在本组件范围内停止拖拽行为时,触发回调。
// isSuccess=false时,说明drop的位置在grid外部;insertIndex > length时,说明有新增元素的事件发生
if (!isSuccess || insertIndex >= this.numbers.length || insertIndex == 0) {
return
}
console.info('tag' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置,insertIndex拖拽插入位置
this.changeIndex(itemIndex, insertIndex)
})
}.width('100%').margin({ top: 5 })
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS grid拖拽后动画不流畅
463浏览 • 1回复 待解决
HarmonyOS grid拖拽和增删动画效果
461浏览 • 1回复 待解决
HarmonyOS grid拖拽效果如何添加动画
443浏览 • 1回复 待解决
HarmonyOS 关于Grid组件拖拽排序的问题
959浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
925浏览 • 1回复 待解决
HarmonyOS Grid组件拖拽排序
559浏览 • 1回复 待解决
HarmonyOS Grid拖拽,让部分item不响应拖拽
397浏览 • 1回复 待解决
HarmonyOS Grid拖拽到边缘Grid无法自动滚屏
699浏览 • 1回复 待解决
HarmonyOS Grid拖拽无回调
292浏览 • 1回复 待解决
Grid如何实现拖拽功能
3007浏览 • 1回复 待解决
grid如何怎么实现拖拽功能
1133浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何利用鸿蒙HarmonyOS NEXT的Grid组件实现网格元素的拖拽动画效果?
503浏览 • 1回复 待解决
HarmonyOS 拖拽时动画会丢失
266浏览 • 1回复 待解决
HarmonyOS 如何实现拖拽Grid中的元素,并使其换位
330浏览 • 1回复 待解决
HarmonyOS Grid间距问题
182浏览 • 1回复 待解决
HarmonyOS Grid相关问题
925浏览 • 1回复 待解决
grid怎么实现拖拽功能啊 ,很急有没有大神知道?
3568浏览 • 1回复 待解决
HarmonyOS 使用Grid组件开发可编辑顺序的功能,在拖拽item时如何设置其他组件顺序改变的动画效果
500浏览 • 1回复 待解决
HarmonyOS 元素使用了动画事件,会监听不到手势拖拽。去掉动画事件可以监听到手势拖拽。
301浏览 • 1回复 待解决
HarmonyOS image组件拖拽问题
645浏览 • 1回复 待解决
HarmonyOS Tabs嵌套Grid问题
415浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS中实现Grid组件子组件位置拖拽互换?
659浏览 • 1回复 待解决
HarmonyOS Grid和半模态问题
513浏览 • 1回复 待解决
如何实现拖拽时列表项占位动画的效果
2831浏览 • 1回复 待解决
HarmonyOS Grid容器视图更新问题
801浏览 • 1回复 待解决
参考如下Demo: