文章目录前言方案对比表详细实现水平拖拽垂直拖拽完整代码优劣分析实际案例侧滑删除下拉刷新写在最后前言上篇文章讲了自由拖拽——方块可以往任何方向移动。但实际场景中很多时候我们需要限制拖拽方向。比如音量滑块只能水平拖动下拉刷新只能垂直拖动侧滑删除只能水平拖动PanGesture的direction参数就是用来限制拖拽方向的。方案对比表PanDirection提供了以下枚举值值说明适用场景All所有方向自由拖拽Horizontal仅水平滑块、轮播Vertical仅垂直下拉、列表排序Left仅向左右滑删除Right仅向右左滑展开|Up| 仅向上 | 上滑关闭 ||Down| 仅向下 | 下拉刷新 |详细实现水平拖拽StatehOffsetX:number0StatehPosX:number0Stack(){Row(){Column(){Text(← →).fontSize(18).fontColor(#FFFFFF)}.width(70).height(50).backgroundColor(#4D96FF).borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).offset({x:this.hOffsetX,y:0}).gesture(PanGesture({direction:PanDirection.Horizontal}).onActionUpdate((event:GestureEvent){this.hOffsetXthis.hPosXevent.offsetX}).onActionEnd((){this.hPosXthis.hOffsetX}))}}.width(100%).height(60).backgroundColor(#F8F8F8).borderRadius(10)关键点direction: PanDirection.Horizontal— 只响应水平方向的拖拽.offset({ x: this.hOffsetX, y: 0 })— Y 轴固定为 0只在 X 轴移动onActionUpdate只使用event.offsetX忽略event.offsetY用户上下拖动手指时方块不会有反应——只有左右拖动才会移动。垂直拖拽StatevOffsetY:number0StatevPosY:number0Stack(){Column(){Column(){Text(↑ ↓).fontSize(18).fontColor(#FFFFFF)}.width(70).height(50).backgroundColor(#6BCB77).borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).offset({x:0,y:this.vOffsetY}).gesture(PanGesture({direction:PanDirection.Vertical}).onActionUpdate((event:GestureEvent){this.vOffsetYthis.vPosYevent.offsetY}).onActionEnd((){this.vPosYthis.vOffsetY}))}}.width(100%).height(60).backgroundColor(#F8F8F8).borderRadius(10)垂直拖拽跟水平拖拽的写法完全对称——direction改成Vertical.offset()的 X 固定为 0使用event.offsetY。完整代码EntryComponentstruct PanGestureDirection{StatehOffsetX:number0StatehPosX:number0StatevOffsetY:number0StatevPosY:number0build(){Column(){Column(){Text(拖拽方向限制).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:16})// 水平拖拽Text(水平拖拽Horizontal).fontSize(14).fontColor(#666666).margin({bottom:8})Stack(){Row(){Column(){Text(← →).fontSize(18).fontColor(#FFFFFF)}.width(70).height(50).backgroundColor(#4D96FF).borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).offset({x:this.hOffsetX,y:0}).gesture(PanGesture({direction:PanDirection.Horizontal}).onActionUpdate((event:GestureEvent){this.hOffsetXthis.hPosXevent.offsetX}).onActionEnd((){this.hPosXthis.hOffsetX}))}}.width(100%).height(60).backgroundColor(#F8F8F8).borderRadius(10)// 垂直拖拽Text(垂直拖拽Vertical).fontSize(14).fontColor(#666666).margin({bottom:8})Stack(){Column(){Column(){Text(↑ ↓).fontSize(18).fontColor(#FFFFFF)}.width(70).height(50).backgroundColor(#6BCB77).borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).offset({x:0,y:this.vOffsetY}).gesture(PanGesture({direction:PanDirection.Vertical}).onActionUpdate((event:GestureEvent){this.vOffsetYthis.vPosYevent.offsetY}).onActionEnd((){this.vPosYthis.vOffsetY}))}}.width(100%).height(60).backgroundColor(#F8F8F8).borderRadius(10)}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(12)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}优劣分析限制方向的优势防止误操作——用户无意中的斜向滑动不会干扰目标方向的拖拽交互语义更清晰——水平就是水平垂直就是垂直简化偏移计算——只需要处理一个轴的数据限制方向的劣势系统判断方向需要一定的拖拽距离可能导致初始响应有延迟用户手指的实际滑动轨迹很少有绝对水平或垂直的系统需要做方向判定实际案例侧滑删除.gesture(PanGesture({direction:PanDirection.Left}).onActionUpdate((event:GestureEvent){this.slideOffsetMath.max(-80,event.offsetX)}).onActionEnd((){if(this.slideOffset-40){this.slideOffset-80// 展开删除按钮}else{this.slideOffset0// 收回}}))下拉刷新.gesture(PanGesture({direction:PanDirection.Down}).onActionUpdate((event:GestureEvent){this.pullDistanceMath.min(100,event.offsetY)}).onActionEnd((){if(this.pullDistance60){this.refreshData()}this.pullDistance0}))写在最后PanDirection让拖拽手势变得精确可控。水平拖拽配水平方向的限制垂直拖拽配垂直方向的限制——方向明确交互才清晰。在实际项目中90% 的拖拽场景都需要限制方向。自由拖拽虽然酷但大多数时候用户不需要也不想要一个可以到处乱拖的组件。
文章目录前言方案对比表详细实现水平拖拽垂直拖拽完整代码优劣分析实际案例侧滑删除下拉刷新写在最后前言上篇文章讲了自由拖拽——方块可以往任何方向移动。但实际场景中很多时候我们需要限制拖拽方向。比如音量滑块只能水平拖动下拉刷新只能垂直拖动侧滑删除只能水平拖动PanGesture的direction参数就是用来限制拖拽方向的。方案对比表PanDirection提供了以下枚举值值说明适用场景All所有方向自由拖拽Horizontal仅水平滑块、轮播Vertical仅垂直下拉、列表排序Left仅向左右滑删除Right仅向右左滑展开|Up| 仅向上 | 上滑关闭 ||Down| 仅向下 | 下拉刷新 |详细实现水平拖拽StatehOffsetX:number0StatehPosX:number0Stack(){Row(){Column(){Text(← →).fontSize(18).fontColor(#FFFFFF)}.width(70).height(50).backgroundColor(#4D96FF).borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).offset({x:this.hOffsetX,y:0}).gesture(PanGesture({direction:PanDirection.Horizontal}).onActionUpdate((event:GestureEvent){this.hOffsetXthis.hPosXevent.offsetX}).onActionEnd((){this.hPosXthis.hOffsetX}))}}.width(100%).height(60).backgroundColor(#F8F8F8).borderRadius(10)关键点direction: PanDirection.Horizontal— 只响应水平方向的拖拽.offset({ x: this.hOffsetX, y: 0 })— Y 轴固定为 0只在 X 轴移动onActionUpdate只使用event.offsetX忽略event.offsetY用户上下拖动手指时方块不会有反应——只有左右拖动才会移动。垂直拖拽StatevOffsetY:number0StatevPosY:number0Stack(){Column(){Column(){Text(↑ ↓).fontSize(18).fontColor(#FFFFFF)}.width(70).height(50).backgroundColor(#6BCB77).borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).offset({x:0,y:this.vOffsetY}).gesture(PanGesture({direction:PanDirection.Vertical}).onActionUpdate((event:GestureEvent){this.vOffsetYthis.vPosYevent.offsetY}).onActionEnd((){this.vPosYthis.vOffsetY}))}}.width(100%).height(60).backgroundColor(#F8F8F8).borderRadius(10)垂直拖拽跟水平拖拽的写法完全对称——direction改成Vertical.offset()的 X 固定为 0使用event.offsetY。完整代码EntryComponentstruct PanGestureDirection{StatehOffsetX:number0StatehPosX:number0StatevOffsetY:number0StatevPosY:number0build(){Column(){Column(){Text(拖拽方向限制).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:16})// 水平拖拽Text(水平拖拽Horizontal).fontSize(14).fontColor(#666666).margin({bottom:8})Stack(){Row(){Column(){Text(← →).fontSize(18).fontColor(#FFFFFF)}.width(70).height(50).backgroundColor(#4D96FF).borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).offset({x:this.hOffsetX,y:0}).gesture(PanGesture({direction:PanDirection.Horizontal}).onActionUpdate((event:GestureEvent){this.hOffsetXthis.hPosXevent.offsetX}).onActionEnd((){this.hPosXthis.hOffsetX}))}}.width(100%).height(60).backgroundColor(#F8F8F8).borderRadius(10)// 垂直拖拽Text(垂直拖拽Vertical).fontSize(14).fontColor(#666666).margin({bottom:8})Stack(){Column(){Column(){Text(↑ ↓).fontSize(18).fontColor(#FFFFFF)}.width(70).height(50).backgroundColor(#6BCB77).borderRadius(12).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).offset({x:0,y:this.vOffsetY}).gesture(PanGesture({direction:PanDirection.Vertical}).onActionUpdate((event:GestureEvent){this.vOffsetYthis.vPosYevent.offsetY}).onActionEnd((){this.vPosYthis.vOffsetY}))}}.width(100%).height(60).backgroundColor(#F8F8F8).borderRadius(10)}.width(100%).padding(24).backgroundColor(#FFFFFF).borderRadius(12)}.width(100%).height(100%).backgroundColor(#F5F6FA).padding(16)}}优劣分析限制方向的优势防止误操作——用户无意中的斜向滑动不会干扰目标方向的拖拽交互语义更清晰——水平就是水平垂直就是垂直简化偏移计算——只需要处理一个轴的数据限制方向的劣势系统判断方向需要一定的拖拽距离可能导致初始响应有延迟用户手指的实际滑动轨迹很少有绝对水平或垂直的系统需要做方向判定实际案例侧滑删除.gesture(PanGesture({direction:PanDirection.Left}).onActionUpdate((event:GestureEvent){this.slideOffsetMath.max(-80,event.offsetX)}).onActionEnd((){if(this.slideOffset-40){this.slideOffset-80// 展开删除按钮}else{this.slideOffset0// 收回}}))下拉刷新.gesture(PanGesture({direction:PanDirection.Down}).onActionUpdate((event:GestureEvent){this.pullDistanceMath.min(100,event.offsetY)}).onActionEnd((){if(this.pullDistance60){this.refreshData()}this.pullDistance0}))写在最后PanDirection让拖拽手势变得精确可控。水平拖拽配水平方向的限制垂直拖拽配垂直方向的限制——方向明确交互才清晰。在实际项目中90% 的拖拽场景都需要限制方向。自由拖拽虽然酷但大多数时候用户不需要也不想要一个可以到处乱拖的组件。
