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觸發條件,雙指向左下方拖動:

審核編輯 黃宇
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
鴻蒙
+關注
關注
60文章
2963瀏覽量
45883
發布評論請先 登錄
相關推薦
熱點推薦
鴻蒙ArkTS聲明式開發:跨平臺支持列表【顯隱控制】 通用屬性
控制當前組件顯示或隱藏。注意,即使組件處于隱藏狀態,在頁面刷新時仍存在重新創建過程,因此當對性能有嚴格要求時建議使用[條件渲染]代替。 默認值:Visibility.Visible 從API version 9開始,該接口支持在ArkTS卡片中使用。
鴻蒙ArkTS聲明式開發:跨平臺支持列表【形狀裁剪】 通用屬性
參數為相應類型的組件,按指定的形狀對當前組件進行裁剪;參數為boolean類型時,設置是否按照父容器邊緣輪廓進行裁剪。 默認值:false 從API version 9開始,該接口支持在ArkTS卡片中使用。
鴻蒙ArkTS聲明式開發:跨平臺支持列表PanGesture之基礎手勢
評論