前言
GestureDetector基本用法
常用事件
監聽事件實作縮放
監聽事件實作拖拽
事件通知
在Flutter開發App的過程中,我們除了需要靈活的使用各種元件之外,還需要掌握手勢的識别,比如我們常常需要在操作App的時候使用到縮放,輕按兩下,放大,縮小等操作,這些Flutter都給我們提供了監聽的元件GestureDetector。這篇博文将詳細介紹GestureDetector手勢識别的使用規則。(拖動手勢監聽)
我們前面提到過,在Flutter開發中,一切皆是元件,是以GestureDetector同樣是一個元件,我們使用它,通常是作為一個父Widget包裹一個子Widget外面(也就是你需要捕捉那個元件的手勢,就把GestureDetector套在外外面),而内部我們通過onTap回調來實作其點選的效果,代碼如下:
比如上面的代碼就是改造Text元件成為按鈕的方式,這裡捕捉了點選事件。
GestureDetector手勢識别不僅僅隻有onTap事件,還有很多很多的常用事件,部落客通過一張表格将它們全部列舉了出來,友善大家查閱:
屬性
取值意義
onTapDwon
當按下螢幕時觸發
onTap
當與螢幕短暫地觸碰時觸發,最常用
onTapUp
當使用者停止觸碰螢幕時觸發
onTapCancel
當使用者觸摸螢幕,但沒有完成Tap事件時觸發
onDoubleTap
快速輕按兩下螢幕時觸發
onLongPress
當長按螢幕時觸發(與螢幕接觸事件必須超過500ms)
onPanUpdate
當在螢幕上移動時觸發
onVerticalDragDown
當手指觸碰螢幕且準備往螢幕垂直方向移動時觸發
onVerticalDragStart
當手指觸碰螢幕且開始往螢幕垂直方向移動時觸發
onVerticalDragUpdate
當手指觸碰螢幕且開始往螢幕垂直方向移動并發生位移時觸發
onVerticalDragEnd
當使用者完成垂直方向觸摸螢幕時觸發
onVerticalDragCancel
當使用者中斷了onVerticalDragDown時觸發
onHorizontalDragDown
當手指觸摸螢幕且準備往螢幕水準方向移動時觸發
onHorizontalDragStart
當手指觸摸螢幕且開始往螢幕水準方向移動時觸發
onHorizontalDragUpdate
當手指觸摸螢幕且開始往螢幕水準方向移動并發生位移時觸發
onHorizontalDragEnd
當使用者完成水準方向觸摸螢幕時觸發
onHorizontalDragCancel
當使用者中斷了onHorizontalDragDown時觸發
onPanDown
當使用者觸摸螢幕時觸發
onPanStart
當使用者觸摸螢幕并開始移動時觸發
當使用者觸摸螢幕并産生移動時觸發
onPanEnd
當使用者完成觸摸螢幕時觸發
onScaleStart
當使用者觸摸螢幕并開始縮放時觸發
onScaleUpdate
當使用者觸摸螢幕并産生縮放時觸發
onScaleEnd
當使用者完成縮放時觸發
雖然說上面表格非常詳細,但其中有些事件是互斥的,并不能同時存在,比如onVerticalUpdate,onHorizontalUpdate,onPanUpdate這些三個事件都不能同時存在,否則會報錯。
另外,onPanUpdate和onScaleUpdate也不能同時存在,這是因為在Gesture識别器裡,Scale操作是Pan操作的超集。
既然我們了解了如何使用這些事件,那麼,我們就應該實踐起來,這裡小編将用上面的事件實作一個縮放效果,代碼如下:
代碼非常的簡單,就是縮放FlutterLogo的大小,實作的效果如下圖所示:
既然我們已經了解這麼多事件,不妨多來一個事件,也就是App中常用的拖拽操作,代碼如下(略微改改上上面的代碼就行):
僅僅改變了事件的代碼,前面說過onPanUpdate與onScaleUpdate不能同時存在,是以不能直接添加事件,需要删除onScaleUpdate後在添加。
Notification是“通知”的意思,這和Android中不一樣。在Flutter裡,Notification會沿着目前的context節點從下往上傳遞,所有父節點都可以通過NotificationListener來監聽通知,這種由子向父的傳遞方式,我們稱為“通知冒泡”,并繼承至Notification,而父Widget使用NotificationListener進行監聽并捕獲通知。常用的NotificatioListener有LayoutChangeNotification,SizeChangedLayoutNotifier,ScrollNotification等。比如本篇将監聽ListView滾動狀态:是通過NotificationListener裡的onNotification回調方法來判斷狀态。代碼如下:
實作效果如下圖所示,代碼很好了解,這裡就不在贅述了: