PanGesture
用于觸發拖動手勢事件,滑動的最小距離為5vp時拖動手勢識別成功。
說明:
開發前請熟悉鴻蒙開發指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]從API Version 7開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。
接口
PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: number } | [PanGestureOptions])
參數:
參數名稱 | 參數類型 | 必填 | 參數描述 |
---|---|---|---|
fingers | number | 否 | 觸發拖動的最少手指數,最小為1指, 最大取值為10指。 默認值:1 取值范圍:[1,10]**說明:**當設置的值小于1或不設置時,會被轉化為默認值。 |
direction | PanDirection | 否 | 觸發拖動的手勢方向,此枚舉值支持邏輯與(&)和邏輯或( |
distance | number | 否 | 最小拖動識別距離,單位為vp。 默認值:5 說明: [Tabs組件]滑動與該拖動手勢事件同時存在時,可將distance值設為1,使拖動更靈敏,避免造成事件錯亂。 當拖動距離的值小于等于0時,會被轉化為默認值。 |
PanDirection枚舉說明
名稱 | 描述 |
---|---|
All | 所有方向。 |
Horizontal | 水平方向。 |
Vertical | 豎直方向。 |
Left | 向左拖動。 |
Right | 向右拖動。 |
Up | 向上拖動。 |
Down | 向下拖動。 |
None | 任何方向都不可觸發拖動手勢事件。 |
PanGestureOptions
通過PanGestureOptions對象接口可以動態修改滑動手勢識別器的屬性,從而避免通過狀態變量修改屬性(狀態變量修改會導致UI刷新)。
PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance?: number })
參數:
參數名稱 | 參數類型 | 必填 | 參數描述 |
---|---|---|---|
fingers | number | 否 | 觸發滑動的最少手指數,最小為1指, 最大取值為10指。 默認值:1 |
direction | PanDirection | 否 | 設置滑動方向,此枚舉值支持邏輯與(&)和邏輯或( |
distance | number | 否 | 最小滑動識別距離,單位為vp。 默認值:5.0 說明: [Tabs組件]滑動與該拖動手勢事件同時存在時,可將distance值設為1,使拖動更靈敏,避免造成事件錯亂。 當拖動距離的值小于等于0時,會被轉化為默認值。 |
接口
名稱 | 功能描述 |
---|---|
setDirection(value: PanDirection) | 設置direction屬性。 |
setDistance(value: number) | 設置distance屬性。 |
setFingers(value: number) | 設置fingers屬性。 |
事件
名稱 | 功能描述 |
---|---|
onActionStart(event: (event?: [GestureEvent]) => void) | Pan手勢識別成功回調。 |
onActionUpdate(event: (event?: [GestureEvent]) => void) | Pan手勢移動過程中回調。 |
onActionEnd(event: (event?: [GestureEvent]) => void) | Pan手勢識別成功,手指抬起后觸發回調。 |
onActionCancel(event: () => void) | Pan手勢識別成功,接收到觸摸取消事件觸發回調。 |
示例
// xxx.ets
@Entry
@Component
struct PanGestureExample {
@State offsetX: number = 0
@State offsetY: number = 0
@State positionX: number = 0
@State positionY: number = 0
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
build() {
Column() {
Column() {
Text('PanGesture offset:nX: ' + this.offsetX + 'n' + 'Y: ' + this.offsetY)
}
.height(200)
.width(300)
.padding(20)
.border({ width: 3 })
.margin(50)
.translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以組件左上角為坐標原點進行移動
// 左右拖動觸發該手勢事件
.gesture(
PanGesture(this.panOption)
.onActionStart((event?: GestureEvent) = > {
console.info('Pan start')
})
.onActionUpdate((event?: GestureEvent) = > {
if (event) {
this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY
}
})
.onActionEnd(() = > {
this.positionX = this.offsetX
this.positionY = this.offsetY
console.info('Pan end')
})
)
Button('修改PanGesture觸發條件')
.onClick(() = > {
// 將PanGesture手勢事件觸發條件改為雙指以任意方向拖動
this.panOption.setDirection(PanDirection.All)
this.panOption.setFingers(2)
})
}
}
}
`HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
示意圖:
向左拖動:
點擊按鈕修改PanGesture觸發條件,雙指向左下方拖動:
審核編輯 黃宇
-
鴻蒙
+關注
關注
57文章
2309瀏覽量
42740
發布評論請先 登錄
相關推薦
評論