做自(zì)由與創造的先行者

Flutter 手勢

Flutter開(kāi)發手冊

介紹

本文(wén)檔介紹了(le)如何在Flutter中監聽并響應手勢(點擊、拖動和(hé)縮放(fàng))。

Flutter中的手勢系統有兩個獨立的層。第一層有原始指針(pointer)事(shì)件,它描述了(le)屏幕上(shàng)指針(例如,觸摸,鼠标和(hé)觸控筆(bǐ))的位置和(hé)移動。 第二層有手勢,描述由一個或多個指針移動組成的語義動作(zuò)。

Pointers

指針(Pointer)代表用(yòng)戶與設備屏幕交互的原始數據。有四種類型的指針事(shì)

PointerDownEvent 指針接觸到(dào)屏幕的特定位置

PointerMoveEvent 指針從(cóng)屏幕上(shàng)的一個位置移動到(dào)另一個位置

PointerUpEvent 指針停止接觸屏幕

PointerCancelEvent 指針的輸入事(shì)件不再針對(duì)此應用(yòng)(事(shì)件取消)

在指針按下(xià)時(shí),框架對(duì)您的應用(yòng)程序執行_命中測試_,以确定指針與屏幕相接的位置存在哪些(xiē)widget。 指針按下(xià)事(shì)件(以及該指針的後續事(shì)件)然後被分發到(dào)由_命中測試_發現(xiàn)的最内部的widget。 從(cóng)那裏開(kāi)始,這(zhè)些(xiē)事(shì)件會(huì)冒泡在widget樹中向上(shàng)冒泡,這(zhè)些(xiē)事(shì)件會(huì)從(cóng)最内部的widget被分發到(dào)到(dào)widget根的路徑上(shàng)的所有小(xiǎo)部件(譯者語:這(zhè)和(hé)web中事(shì)件冒泡機制相似), 沒有機制取消或停止冒泡過程(譯者語:這(zhè)和(hé)web不同,web中的時(shí)間冒泡是可以停止的)。

To listen to pointer events directly from the widgets layer, use a Listener widget. However, generally, consider using gestures (as discussed below) instead. 要直接從(cóng)widget層監聽指針事(shì)件,可以使用(yòng)Listenerwidget。 但(dàn)是,通常,請(qǐng)考慮使用(yòng)手勢(如下(xià)所述)

手勢

手勢表示可以從(cóng)多個單獨的指針事(shì)件(甚至可能(néng)是多個單獨的指針)識别的語義動作(zuò)(例如,輕敲,拖動和(hé)縮放(fàng))。 完整的一個手勢可以分派多個事(shì)件,對(duì)應于手勢的生命周期(例如,拖動開(kāi)始,拖動更新和(hé)拖動結束):

TaponTapDown 指針已經在特定位置與屏幕接觸onTapUp 指針停止在特定位置與屏幕接觸onTap tap事(shì)件觸發onTapCancel 先前指針觸發的onTapDown不會(huì)在觸發tap事(shì)件

雙擊onDoubleTap 用(yòng)戶快(kuài)速連續兩次在同一位置輕敲屏幕.

長按onLongPress 指針在相同位置長時(shí)間保持與屏幕接觸

垂直拖動onVerticalDragStart 指針已經與屏幕接觸并可能(néng)開(kāi)始垂直移動onVerticalDragUpdate 指針與屏幕接觸并已沿垂直方向移動.onVerticalDragEnd 先前與屏幕接觸并垂直移動的指針不再與屏幕接觸,并且在停止接觸屏幕時(shí)以特定速度移動

水(shuǐ)平拖動onHorizontalDragStart 指針已經接觸到(dào)屏幕并可能(néng)開(kāi)始水(shuǐ)平移動onHorizontalDragUpdate 指針與屏幕接觸并已沿水(shuǐ)平方向移動onHorizontalDragEnd 先前與屏幕接觸并水(shuǐ)平移動的指針不再與屏幕接觸,并在停止接觸屏幕時(shí)以特定速度移動

要從(cóng)widget層監聽手勢,請(qǐng)使用(yòng) GestureDetector.

如果您使用(yòng)的是Material Components,那麽大(dà)多數widget已經對(duì)tap或手勢做出了(le)響應。 例如 IconButton和(hé) FlatButton 響應presses(taps),ListView響應滑動事(shì)件觸發滾動。 如果您不使用(yòng)這(zhè)些(xiē)widget,但(dàn)想要在點擊時(shí)上(shàng)出現(xiàn)“墨水(shuǐ)飛(fēi)濺”效果,可以使用(yòng)InkWell。

手勢消歧

在屏幕上(shàng)的指定位置,可能(néng)會(huì)有多個手勢檢測器。所有這(zhè)些(xiē)手勢檢測器在指針事(shì)件流經過并嘗試識别特定手勢時(shí)監聽指針事(shì)件流。 GestureDetector widget決定是哪種手勢。

當屏幕上(shàng)給定指針有多個手勢識别器時(shí),框架通過讓每個識别器加入一個“手勢競争場”來(lái)确定用(yòng)戶想要的手勢。“手勢競争場”使用(yòng)以下(xià)規則确定哪個手勢勝出

在任何時(shí)候,識别者都可以宣布失敗并離開(kāi)“手勢競争場”。如果在“競争場”中隻剩下(xià)一個識别器,那麽該識别器就是赢家

在任何時(shí)候,識别者都可以宣布勝利,這(zhè)會(huì)導緻勝利,并且所有剩下(xià)的識别器都會(huì)失敗

例如,在消除水(shuǐ)平和(hé)垂直拖動的歧義時(shí),兩個識别器在接收到(dào)指針向下(xià)事(shì)件時(shí)進入“手勢競争場”。識别器觀察指針移動事(shì)件。 如果用(yòng)戶将指針水(shuǐ)平移動超過一定數量的邏輯像素,則水(shuǐ)平識别器将聲明(míng)勝利,并且手勢将被解釋爲水(shuǐ)平拖拽。 類似地,如果用(yòng)戶垂直移動超過一定數量的邏輯像素,垂直識别器将宣布勝利。

當隻有水(shuǐ)平(或垂直)拖動識别器時(shí),“手勢競争場”是有益的。在這(zhè)種情況下(xià),“手勢競争場”将隻有一個識别器,并且水(shuǐ)平拖動将被立即識别,這(zhè)意味着水(shuǐ)平移動的第一個像素可以被視(shì)爲拖動,用(yòng)戶不需要等待進一步的手勢消歧。

網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發
下(xià)一篇:Flutter 動畫(huà)
上(shàng)一篇:Flutter 添加交互