建站
咨詢
售后
建站咨詢
新聞中心
Flutter了解之手勢
描述了屏幕上指針（觸摸、鼠標、觸控筆）的位置和移動。
創(chuàng)新互聯(lián)公司主打移動網(wǎng)站、網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護、空間域名、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。
Flutter中可以使用Listener(功能性組件)來監(jiān)聽原始觸摸事件
例1
例2
例3
忽略PointerEvent
手勢: 描述由一個或多個指針移動組成的語義動作，如拖動、縮放、雙擊等。
Material大多數(shù)widget已經(jīng)對tap或手勢做出了響應(yīng)。 例如 IconButton和 FlatButton 響應(yīng)單擊，ListView響應(yīng)滑動事件觸發(fā)滾動。
用于手勢識別的功能性組件，通過它可以來識別各種手勢。
例（單擊）
例（添加Material觸摸水波效果 InkWell組件）
例（滑動關(guān)閉 Dismissable組件）
例（單擊、雙擊、長按）
例（滑動）
例（掃動---單一方向）
例（縮放）
GestureRecognizer是一個抽象類。
一種手勢的識別器對應(yīng)一個GestureRecognizer的子類。
例
由于手勢競爭最終只有一個勝出者，所以，當有多個手勢識別器時，可能會產(chǎn)生沖突。
例
例
在APP中經(jīng)常會需要一個廣播機制，用以跨頁面通知。比如一個需要登錄的APP中，頁面會關(guān)注用戶登錄或注銷事件，來進行一些狀態(tài)更新。
這時候，一個事件總線便會非常有用，事件總線通常實現(xiàn)了訂閱者模式，訂閱者模式包含發(fā)布者和訂閱者兩種角色，可以通過事件總線來觸發(fā)事件和監(jiān)聽事件。
對于一些簡單的應(yīng)用，事件總線是足以滿足業(yè)務(wù)需求的，如果決定使用狀態(tài)管理包的話，一定要想清楚APP是否真的有必要使用它，防止“化簡為繁”、過度設(shè)計。
例
在widget樹中，每一個節(jié)點都可以分發(fā)通知，通知會沿著當前節(jié)點向上傳遞，所有父節(jié)點都可以通過NotificationListener來監(jiān)聽通知。
Flutter中將這種由子向父的傳遞通知的機制稱為通知冒泡（Notification Bubbling）。
通知冒泡和用戶觸摸事件冒泡是相似的，但有一點不同：通知冒泡可以中止，但用戶觸摸事件不行。
通知冒泡和Web開發(fā)中瀏覽器事件冒泡原理是相似的，都是事件從出發(fā)源逐層向上傳遞，可以在上層節(jié)點任意位置來監(jiān)聽通知/事件，也可以終止冒泡過程，終止冒泡后，通知將不會再向上傳遞。
Flutter的UI框架實現(xiàn)中，除了在可滾動組件在滾動過程中會發(fā)出ScrollNotification之外，還有一些其它的通知，如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等，F(xiàn)lutter正是通過這種通知機制來使父元素可以在一些特定時機來做一些事情。
例
例
例
阻止冒泡
通知冒泡原理
Flutter 手勢指紋解鎖
??在最近做的一個Flutter項目中，需要用到手勢、指紋解鎖，這種需求在原生應(yīng)用中非常常見，但Flutter中手勢密碼解鎖現(xiàn)有庫比較少、官方也僅提供有一個 local_auth 指紋庫，所以就自己寫了個手勢庫。
??其實實現(xiàn)這個自定義的手勢控件有很多思路，首先想到的是，要在View中創(chuàng)建9個圓，那么使用GridView再合適不過了，但是經(jīng)過嘗試，放棄了，這會使交互跟邏輯變的更加復(fù)雜，所以還是選擇直接繼承Widget，自己處理邏輯與手勢，那么下面就是需要處理的邏輯:
由于官方插件庫已經(jīng)提供有 local_auth 庫，在這里就不大贅述，具體使用就參考Flutter官方local_auth插件庫。
??如果在使用過程遇到問題，歡迎下方留言交流。
?? Pub 庫地址
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（五）手勢GestureDetector
在Android中，每一個 View 都可以通過 onTouch 方法重寫其觸摸事件，也可以通過 setOnClickListener 方法來給 View 設(shè)置點擊事件。但是Flutter中除了少部分組件，如 Button 相關(guān)的組件可以直接通過 onPressed 實現(xiàn)點擊事件。其余組件想實現(xiàn)點擊、長按等事件，都需要借助 GestureDetector 來實現(xiàn)手勢監(jiān)聽
下面介紹比較常用的手勢如 onTap （點擊）、 onDoubleTap （雙擊）、 onLongPress （長按）
小球跟隨手指移動的實現(xiàn)應(yīng)該是屬于各種移動端框架作為了解拖動手勢的的典型案例，下面我們來看看用flutter如何實現(xiàn)小球跟隨手指移動
拖動手勢主要由 onPanDown （手指按下）、 onPanUpdate （手指滑動）、 onPanEnd （滑動結(jié)束）構(gòu)成
縮放手勢需要用到 onScaleUpdate 方法，下面是一個簡單的圖片縮放的實現(xiàn)
文章名稱：關(guān)于flutter手勢競爭的信息
本文來源：http://fisionsoft.com.cn/article/dscjsgh.html
