文章目錄

• 一、Flutter 點擊事件處理
• 二、GestureDetector 常用事件說明
• 三、完整代碼示例
• 四、相關資源

一、Flutter 點擊事件處理

---

Flutter 點擊事件處理的組件是 GestureDetector 組件 ;

GestureDetector 組件中可設置的選項 , 在構造函數中的可選參數中, 大部分是回調方法設置字段 ;

class GestureDetector extends StatelessWidget {GestureDetector({Key key,this.child,this.onTapDown, // 按下this.onTapUp, // 抬起this.onTap, // 單擊this.onTapCancel, // 單擊取消this.onSecondaryTapDown,this.onSecondaryTapUp,this.onSecondaryTapCancel,this.onDoubleTap, // 雙擊this.onLongPress, // 長按this.onLongPressStart,this.onLongPressMoveUpdate,this.onLongPressUp,this.onLongPressEnd,this.onVerticalDragDown,this.onVerticalDragStart,this.onVerticalDragUpdate,this.onVerticalDragEnd,this.onVerticalDragCancel,this.onHorizontalDragDown,this.onHorizontalDragStart,this.onHorizontalDragUpdate,this.onHorizontalDragEnd,this.onHorizontalDragCancel,this.onForcePressStart,this.onForcePressPeak,this.onForcePressUpdate,this.onForcePressEnd,this.onPanDown,this.onPanStart,this.onPanUpdate,this.onPanEnd,this.onPanCancel,this.onScaleStart,this.onScaleUpdate,this.onScaleEnd,this.behavior,this.excludeFromSemantics = false,this.dragStartBehavior = DragStartBehavior.start,}) }

GestureDetector 組件用法 :

• 設置各種回調事件 : 在 onXxx 字段設置各種回調事件 , 字段類型是 void Function() 類型的 ;
• 作用組件 : 在 child 字段設置手勢檢測的主體組件 , 就是監聽哪個組件的手勢事件 ;

// 手勢檢測組件 GestureDetector(// 點擊事件onTap: (){print("雙擊");},// 雙擊事件onDoubleTap: (){print("雙擊");},// 長按事件 , ()=>方法名(參數列表) 即可回調一個現有方法onLongPress: () => _longPress(),// 點擊取消onTapCancel: (){print("點擊取消");},// 點擊按下onTapDown: (e){print("點擊按下");},// 點擊抬起onTapUp: (e){print("點擊抬起");},// 手勢檢測的作用組件 , 監聽該組件上的各種手勢child: Container(// 子組件居中alignment: Alignment.center,// 內邊距padding: EdgeInsets.all(100),// 背景裝飾decoration: BoxDecoration(color: Colors.green,),child: Text("手勢檢測",style: TextStyle(fontSize: 50,color: Colors.red,),),), )

二、GestureDetector 常用事件說明

---

GestureDetector 常用事件說明 :

• onTap : 單擊事件 ;
• onDoubleTap : 雙擊事件 ;
• onLongPress : 長按事件 ;
• onTapCancel : 點擊事件取消 , 一個完整的點擊事件由按下 , 抬起 組成 , 如果按下后一直沒有松開 , 就變成了長按操作 , 此時單擊事件自動取消 ; 如果按下后滑出了 child 組件 , 則自動變為點擊取消事件 ;
• onTapDown : 單擊按下事件 ;
• onTapUp : 單擊抬起事件 ;

三、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart';class GesturePage extends StatefulWidget {@override_GesturePageState createState() => _GesturePageState(); }class _GesturePageState extends State<GesturePage> {@overrideWidget build(BuildContext context) {return MaterialApp(// 設置主題theme: ThemeData(primarySwatch: Colors.amber,),// 設置主體組件home: Scaffold(// 設置標題欄appBar: AppBar(title: Text("手勢檢測"),// 返回按鈕設置leading: GestureDetector(// 點擊事件回調函數onTap: (){// 退出當前界面Navigator.pop(context);},// 回退按鈕圖標child: Icon(Icons.arrow_back),),),// 水平/垂直方向平鋪組件body: FractionallySizedBox(// 水平方向平鋪widthFactor: 1,// 幀布局child: Stack(children: <Widget>[// 垂直方向線性布局Column(children: <Widget>[// 手勢檢測組件GestureDetector(// 點擊事件onTap: (){print("雙擊");},// 雙擊事件onDoubleTap: (){print("雙擊");},// 長按事件 , ()=>方法名(參數列表) 即可回調一個現有方法onLongPress: () => _longPress(),// 點擊取消onTapCancel: (){print("點擊取消");},// 點擊按下onTapDown: (e){print("點擊按下");},// 點擊抬起onTapUp: (e){print("點擊抬起");},// 手勢檢測的作用組件 , 監聽該組件上的各種手勢child: Container(// 子組件居中alignment: Alignment.center,// 內邊距padding: EdgeInsets.all(100),// 背景裝飾decoration: BoxDecoration(color: Colors.green,),child: Text("手勢檢測",style: TextStyle(fontSize: 50,color: Colors.red,),),),)],)],),),),);}/// 長按事件void _longPress(){print("長按");} }

運行效果展示 :

打印結果 :

2021-03-02 20:26:54.072 15660-15678/com.example.flutter_cmd I/flutter: 點擊按下 2021-03-02 20:26:54.073 15660-15678/com.example.flutter_cmd I/flutter: 點擊抬起 2021-03-02 20:26:54.073 15660-15678/com.example.flutter_cmd I/flutter: 雙擊 2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter: 點擊按下 2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter: 點擊抬起 2021-03-02 20:26:58.229 15660-15678/com.example.flutter_cmd I/flutter: 雙擊 2021-03-02 20:26:59.279 15660-15678/com.example.flutter_cmd I/flutter: 點擊按下 2021-03-02 20:26:59.682 15660-15678/com.example.flutter_cmd I/flutter: 點擊取消 2021-03-02 20:26:59.682 15660-15678/com.example.flutter_cmd I/flutter: 長按 2021-03-02 20:27:02.233 15660-15678/com.example.flutter_cmd I/flutter: 點擊按下 2021-03-02 20:27:02.284 15660-15678/com.example.flutter_cmd I/flutter: 點擊取消 2021-03-02 20:27:02.634 15660-15678/com.example.flutter_cmd I/flutter: 長按 2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter: 點擊按下 2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter: 點擊抬起 2021-03-02 20:27:04.465 15660-15678/com.example.flutter_cmd I/flutter: 雙擊

四、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 ( 非官方 , 翻譯的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/15484718 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Flutter 手势交互 ( 点击事件处理 | 点击 onTap | 双击 | 长按 onLongPress | 点击取消 | 按下 onTapDown | 抬起 onTapUp )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。