HarmonyOS 鸿蒙Next Grid组件编辑模式实现拖拽
HarmonyOS 鸿蒙Next Grid组件编辑模式实现拖拽
grid设置不规则GridItem的条件下，editMode模式下的拖拽就无法正常使用了，如附件这种场景，麻烦指导一下。
2 回复
视频附件中播放的是可以拖拽，
请提供，grid设置不规则GridItem的条件下，editMode模式下的拖拽就无法正常使用了的视频附件，
最好提供一个最小化demo,以便分析问题
可以参考以下demo
<span class="hljs-comment">// xxx.ets</span>
@Entry
@Component
struct GridItemExample {
@State numbers: number[] = []
@State dragItem: number = -<span class="hljs-number">1</span>
@State scaleItem: number = -<span class="hljs-number">1</span>
@State item: number = -<span class="hljs-number">1</span>
@State offsetX: number = <span class="hljs-number">0</span>
@State offsetY: number = <span class="hljs-number">0</span>
private FIX_VP_X: number = <span class="hljs-number">108</span>
private FIX_VP_Y: number = <span class="hljs-number">120</span>
@State moveIndex:number = -<span class="hljs-number">1</span>
scroller: Scroller = <span class="hljs-keyword">new</span> Scroller()
layoutOptions1: GridLayoutOptions = {
regularSize: [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>],
irregularIndexes: [<span class="hljs-number">0</span>]
}
aboutToAppear() {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">1</span>; i <= <span class="hljs-number">11</span>; i++) {
<span class="hljs-keyword">this</span>.numbers.push(i)
}
}
itemMove(index: number, newIndex: number): <span class="hljs-keyword">void</span> {
<span class="hljs-keyword">let</span> tmp = <span class="hljs-keyword">this</span>.numbers.splice(index, <span class="hljs-number">1</span>)
<span class="hljs-keyword">this</span>.numbers.splice(newIndex, <span class="hljs-number">0</span>, tmp[<span class="hljs-number">0</span>])
}
build() {
Column() {
Grid(<span class="hljs-keyword">this</span>.scroller, <span class="hljs-keyword">this</span>.layoutOptions1) {
ForEach(<span class="hljs-keyword">this</span>.numbers, (item: number) => {
GridItem() {
Text(item + <span class="hljs-string">''</span>)
.fontSize(<span class="hljs-number">16</span>)
.width(<span class="hljs-string">'100'</span>)
.textAlign(TextAlign.Center)
.height(<span class="hljs-number">100</span>)
.borderRadius(<span class="hljs-number">10</span>)
.backgroundColor(<span class="hljs-number">0xFFFFFF</span>)
.shadow(<span class="hljs-keyword">this</span>.scaleItem == item ? { radius: <span class="hljs-number">70</span>, color: <span class="hljs-string">'#15000000'</span>, offsetX: <span class="hljs-number">0</span>, offsetY: <span class="hljs-number">0</span> } :
{ radius: <span class="hljs-number">0</span>, color: <span class="hljs-string">'#15000000'</span>, offsetX: <span class="hljs-number">0</span>, offsetY: <span class="hljs-number">0</span> })
.animation({ curve: Curve.Sharp, duration: <span class="hljs-number">300</span> })
.scale({ x: <span class="hljs-keyword">this</span>.scaleItem == item ? <span class="hljs-number">1.05</span> : <span class="hljs-number">1</span>, y: <span class="hljs-keyword">this</span>.scaleItem == item ? <span class="hljs-number">1.05</span> : <span class="hljs-number">1</span> })
.zIndex(<span class="hljs-keyword">this</span>.dragItem == item ? <span class="hljs-number">1</span> : <span class="hljs-number">0</span>)
.translate(<span class="hljs-keyword">this</span>.dragItem == item ? { x: <span class="hljs-keyword">this</span>.offsetX, y: <span class="hljs-keyword">this</span>.offsetY } : { x: <span class="hljs-number">0</span>, y: <span class="hljs-number">0</span> })
.gesture(
<span class="hljs-comment">// 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件</span>
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: <span class="hljs-literal">true</span> })
.onAction((event?: GestureEvent) => {
animateTo({ curve: Curve.Friction, duration: <span class="hljs-number">300</span> }, () => {
<span class="hljs-keyword">this</span>.scaleItem = item
})
})
.onActionEnd(() => {
animateTo({ curve: Curve.Friction, duration: <span class="hljs-number">300</span> }, () => {
<span class="hljs-keyword">this</span>.scaleItem = -<span class="hljs-number">1</span>
})
}),
PanGesture({ fingers: <span class="hljs-number">1</span>, direction: <span class="hljs-literal">null</span>, distance: <span class="hljs-number">0</span> })
.onActionStart(() => {
<span class="hljs-keyword">this</span>.dragItem = item
})
.onActionUpdate((event: GestureEvent) => {
<span class="hljs-keyword">this</span>.offsetY = event.offsetY
<span class="hljs-keyword">this</span>.offsetX = event.offsetX
<span class="hljs-keyword">let</span> index = <span class="hljs-keyword">this</span>.numbers.indexOf(<span class="hljs-keyword">this</span>.dragItem)
<span class="hljs-keyword">let</span> xIndex = <span class="hljs-built_in">Math</span>.round(<span class="hljs-keyword">this</span>.offsetX/<span class="hljs-keyword">this</span>.FIX_VP_X)
<span class="hljs-keyword">let</span> yIndex = <span class="hljs-built_in">Math</span>.round(<span class="hljs-keyword">this</span>.offsetY/<span class="hljs-keyword">this</span>.FIX_VP_Y)
<span class="hljs-keyword">let</span> insertIndex = index + yIndex * <span class="hljs-number">3</span> + xIndex
<span class="hljs-keyword">if</span>(insertIndex !== <span class="hljs-keyword">this</span>.moveIndex){
<span class="hljs-keyword">this</span>.moveIndex = insertIndex
}
})
.onActionEnd(() => {
animateTo({ curve: curves.interpolatingSpring(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">400</span>, <span class="hljs-number">38</span>) }, () => {
<span class="hljs-keyword">let</span> index = <span class="hljs-keyword">this</span>.numbers.indexOf(<span class="hljs-keyword">this</span>.dragItem)
<span class="hljs-keyword">if</span>(index === <span class="hljs-number">0</span>){
<span class="hljs-keyword">this</span>.moveIndex --
}
<span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.moveIndex < <span class="hljs-number">0</span>){
<span class="hljs-keyword">this</span>.moveIndex = <span class="hljs-number">0</span>
}
<span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.moveIndex > <span class="hljs-keyword">this</span>.numbers.length - <span class="hljs-number">1</span>){
<span class="hljs-keyword">this</span>.moveIndex = <span class="hljs-keyword">this</span>.numbers.length - <span class="hljs-number">1</span>
}
<span class="hljs-keyword">this</span>.itemMove(index,<span class="hljs-keyword">this</span>.moveIndex)
<span class="hljs-keyword">this</span>.dragItem = -<span class="hljs-number">1</span>
})
animateTo({
curve: curves.interpolatingSpring(<span class="hljs-number">14</span>, <span class="hljs-number">1</span>, <span class="hljs-number">170</span>, <span class="hljs-number">17</span>), delay: <span class="hljs-number">150</span>
}, () => {
<span class="hljs-keyword">this</span>.scaleItem = -<span class="hljs-number">1</span>
})
})
)
.onCancel(() => {
animateTo({ curve: curves.interpolatingSpring(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">400</span>, <span class="hljs-number">38</span>) }, () => {
<span class="hljs-keyword">this</span>.dragItem = -<span class="hljs-number">1</span>
})
animateTo({
curve: curves.interpolatingSpring(<span class="hljs-number">14</span>, <span class="hljs-number">1</span>, <span class="hljs-number">170</span>, <span class="hljs-number">17</span>)
}, () => {
<span class="hljs-keyword">this</span>.scaleItem = -<span class="hljs-number">1</span>
})
})
)
}
.padding(<span class="hljs-number">10</span>)
}, (item: number) => item.toString())
}
.width(<span class="hljs-string">'90%'</span>)
.editMode(<span class="hljs-literal">true</span>)
.scrollBar(BarState.Off)
.columnsTemplate(<span class="hljs-string">"1fr 1fr 1fr"</span>)
}.width(<span class="hljs-string">'100%'</span>).height(<span class="hljs-string">'100%'</span>).backgroundColor(<span class="hljs-string">'#0D182431'</span>).padding({ top: <span class="hljs-number">5</span> })
}
}
```</code></pre></div></div>
在HarmonyOS鸿蒙系统中，Next Grid组件的编辑模式实现拖拽功能，通常涉及对组件的触摸事件进行监听和处理。以下是一个简要的实现思路：
-
事件监听：首先，需要为Grid组件添加触摸事件监听器，包括触摸开始（ACTION_DOWN）、触摸移动（ACTION_MOVE）和触摸结束（ACTION_UP）等事件。
-
拖拽逻辑：在触摸开始事件中，记录初始位置；在触摸移动事件中，根据移动的距离实时更新组件的位置；在触摸结束事件中，根据最终位置确定拖拽结果，可能需要更新数据模型以保持界面与数据的一致性。
-
动画效果：为了实现平滑的拖拽效果，可以使用动画框架或自定义动画逻辑，根据触摸移动的距离和时间计算动画参数。
-
边界处理：拖拽过程中，需要处理边界情况，如防止组件拖拽出Grid边界，或在Grid内部不同位置间的拖拽时，确保组件能够准确对齐到预设的网格位置。
-
数据同步：拖拽完成后，需要将新的组件位置同步到数据模型中，以便在界面刷新或重新加载时能够保持拖拽后的布局。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html
回到顶部
