Flutter（五）手勢GestureDetector

在Android中，每一個 View 都可以通過 onTouch 方法重寫其觸摸事件，也可以通過 setOnClickListener 方法來給 View 設置點擊事件。但是Flutter中除了少部分組件，如 Button 相關的組件可以直接通過 onPressed 實現點擊事件。其余組件想實現點擊、長按等事件，都需要借助 GestureDetector 來實現手勢監聽

目前成都創新互聯已為千余家的企業提供了網站建設、域名、虛擬空間、網站托管維護、企業網站設計、長治網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

下面介紹比較常用的手勢如 onTap （點擊）、 onDoubleTap （雙擊）、 onLongPress （長按）

小球跟隨手指移動的實現應該是屬于各種移動端框架作為了解拖動手勢的的典型案例，下面我們來看看用flutter如何實現小球跟隨手指移動

拖動手勢主要由 onPanDown （手指按下）、 onPanUpdate （手指滑動）、 onPanEnd （滑動結束）構成

縮放手勢需要用到 onScaleUpdate 方法，下面是一個簡單的圖片縮放的實現

Flutter手勢（粘貼即用 flutter 1.22.6）

import 'package:flutter/material.dart';

void main() = runApp(MyApp());

class MyAppextends StatelessWidget {

// This widget is the root of your application.

@override

Widgetbuild(BuildContext context) {

return MaterialApp(

title:'Flutter Demo',

? theme:ThemeData(

primarySwatch: Colors.blue, splashColor: Colors.transparent),

? home:HYHomePage(),

);

}

}

class HYHomePageextends StatelessWidget {

@override

Widgetbuild(BuildContext context) {

return Scaffold(

appBar:AppBar(

title:Text("列表測試"),

? ),

? body:GestureDemo(),

? // Center(

//? child: Stack(

//? ? alignment: Alignment.center,

//? ? children: [

//? ? ? GestureDetector(

//? ? ? ? onTapDown: (details) {

//? ? ? ? ? print("outer click");

//? ? ? ? },

//? ? ? ? child: Container(

//? ? ? ? ? width: 200,

//? ? ? ? ? height: 200,

//? ? ? ? ? color: Colors.yellow,

//? ? ? ? ? alignment: Alignment.center,

//? ? ? ? ),

//? ? ? ),

//? ? ? IgnorePointer(

//? ? ? ? child: GestureDetector(

//? ? ? ? ? onTapDown: (details) {

//? ? ? ? ? ? print("inner click");

//? ? ? ? ? },

//? ? ? ? ? child: Container(

//? ? ? ? ? ? width: 100,

//? ? ? ? ? ? height: 100,

//? ? ? ? ? ? color: Colors.red,

//? ? ? ? ? ),

//? ? ? ? ),

//? ? ? )

//? ? ],

//? ),

// ),

);

}

}

class GestureDemoextends StatelessWidget {

const GestureDemo({

Key key,

}) :super(key: key);

@override

Widgetbuild(BuildContext context) {

return Center(

child:GestureDetector(

onTapDown: (details) {

print("手指按下");

? ? ? print(details.globalPosition);

? ? ? print(details.localPosition);

? ? },

? ? onTapUp: (details) {

print("手指抬起");

? ? },

? ? onTapCancel: () {

print("手勢取消");

? ? },

? ? onTap: () {

print("手勢點擊");

? ? },

? ? onDoubleTap: () {

print("手指雙擊");

? ? },

? ? onLongPress: () {

print("長按手勢");

? ? },

? ? onPanUpdate: (value){

print('當前我在滑動$value');

? ? },

? ? child:Container(

width:200,

? ? ? height:200,

? ? ? color: Colors.orange,

? ? ),

? ),

);

}

}

class ListenerDemoextends StatelessWidget {

const ListenerDemo({

Key key,

}) :super(key: key);

@override

Widgetbuild(BuildContext context) {

return Listener(

onPointerDown: (event) {

print("指針按下:$event");

? ? print(event.position);

? ? print(event.localPosition);

? },

? onPointerMove: (event) {

//? ? ? ? ? ? print("指針移動:$event");

? },

? onPointerUp: (event) {

//? ? ? ? ? ? print("指針抬起:$event");

? },

? child:Container(

width:200,

? ? height:200,

? ? color: Colors.red,

? ),

);

}

}

Flutter 之 交互

手勢操作在 Flutter 中分為兩類：

第一類是原始的指針事件（Pointer Event），即原生開發中常見的觸摸事件，表示屏幕上觸摸（或鼠標、手寫筆）行為觸發的位移行為；

第二類則是手勢識別（Gesture Detector），表示多個原始指針事件的組合操作，如點擊、雙擊、長按等，是指針事件的語義化封裝。

指針事件表示用戶交互的原始觸摸數據，如手指接觸屏幕 PointerDownEvent、手指在屏幕上移動 PointerMoveEvent、手指抬起 PointerUpEvent，以及觸摸取消 PointerCancelEvent。在手指接觸屏幕，觸摸事件發起時，Flutter 會確定手指與屏幕發生接觸的位置上究竟有哪些組件，并將觸摸事件交給最內層的組件去響應。事件會從這個最內層的組件開始，沿著組件樹向根節點向上冒泡分發。通過 hitTestBehavior 去調整組件在命中測試期內應該如何表現，比如把觸摸事件交給子組件，或者交給其視圖層級之下的組件去響應。關于組件層面的原始指針事件的監聽，Flutter 提供了 Listener Widget，可以監聽其子 Widget 的原始指針事件。

Listener(

child: Container(

color: Colors.black,

width: 300,

height: 300,

),

onPointerDown: (event) = print("down $event"),// 手勢按下回調

onPointerMove:? (event) = print("move $event"),// 手勢移動回調

onPointerUp:? (event) = print("up $event"),// 手勢抬起回調

);

Gesture 是手勢語義的抽象，而如果我們想從組件層監聽手勢，則需要使用 GestureDetector 。GestureDetector 是一個處理各種高級用戶觸摸行為的 Widget，與 Listener 一樣，也是一個功能性組件。

GestureDetector(// 手勢識別

? ? child: Container(color: Colors.red,width: 50,height: 50),// 紅色子視圖

? ? onTap: ()=print("Tap"),// 點擊回調

? ? onDoubleTap: ()=print("Double Tap"),// 雙擊回調

? ? onLongPress: ()=print("Long Press"),// 長按回調

? ? onPanUpdate: (e) {// 拖動回調

? ? ? setState(() {

? ? ? ? // 更新位置

? ? ? ? _left += e.delta.dx;

? ? ? ? _top += e.delta.dy;

? ? ? });

? ? },

? ),

Flutter了解之手勢

描述了屏幕上指針（觸摸、鼠標、觸控筆）的位置和移動。

Flutter中可以使用Listener(功能性組件)來監聽原始觸摸事件

例1

例2

例3

忽略PointerEvent

手勢: 描述由一個或多個指針移動組成的語義動作，如拖動、縮放、雙擊等。

Material大多數widget已經對tap或手勢做出了響應。 例如 IconButton和 FlatButton 響應單擊，ListView響應滑動事件觸發滾動。

用于手勢識別的功能性組件，通過它可以來識別各種手勢。

例（單擊）

例（添加Material觸摸水波效果 InkWell組件）

例（滑動關閉 Dismissable組件）

例（單擊、雙擊、長按）

例（滑動）

例（掃動---單一方向）

例（縮放）

GestureRecognizer是一個抽象類。

一種手勢的識別器對應一個GestureRecognizer的子類。

例

由于手勢競爭最終只有一個勝出者，所以，當有多個手勢識別器時，可能會產生沖突。

例

例

在APP中經常會需要一個廣播機制，用以跨頁面通知。比如一個需要登錄的APP中，頁面會關注用戶登錄或注銷事件，來進行一些狀態更新。

這時候，一個事件總線便會非常有用，事件總線通常實現了訂閱者模式，訂閱者模式包含發布者和訂閱者兩種角色，可以通過事件總線來觸發事件和監聽事件。

對于一些簡單的應用，事件總線是足以滿足業務需求的，如果決定使用狀態管理包的話，一定要想清楚APP是否真的有必要使用它，防止“化簡為繁”、過度設計。

例

在widget樹中，每一個節點都可以分發通知，通知會沿著當前節點向上傳遞，所有父節點都可以通過NotificationListener來監聽通知。

Flutter中將這種由子向父的傳遞通知的機制稱為通知冒泡（Notification Bubbling）。

通知冒泡和用戶觸摸事件冒泡是相似的，但有一點不同：通知冒泡可以中止，但用戶觸摸事件不行。

通知冒泡和Web開發中瀏覽器事件冒泡原理是相似的，都是事件從出發源逐層向上傳遞，可以在上層節點任意位置來監聽通知/事件，也可以終止冒泡過程，終止冒泡后，通知將不會再向上傳遞。

Flutter的UI框架實現中，除了在可滾動組件在滾動過程中會發出ScrollNotification之外，還有一些其它的通知，如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等，Flutter正是通過這種通知機制來使父元素可以在一些特定時機來做一些事情。

例

例

例

阻止冒泡

通知冒泡原理

文章題目：關于flutter模擬手勢的信息
URL標題：http://vcdvsql.cn/article14/dsdjige.html

成都網站建設公司_創新互聯，為您提供服務器托管、網站設計、網站建設、網站內鏈、定制開發、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯