建站
咨詢
售后
建站咨詢
新聞中心
Flutter了解之手勢
描述了屏幕上指針（觸摸、鼠標(biāo)、觸控筆）的位置和移動。
站在用戶的角度思考問題，與客戶深入溝通，找到葫蘆島網(wǎng)站設(shè)計與葫蘆島網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋葫蘆島地區(qū)。
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的子類。
例
由于手勢競爭最終只有一個勝出者，所以，當(dāng)有多個手勢識別器時，可能會產(chǎn)生沖突。
例
例
在APP中經(jīng)常會需要一個廣播機(jī)制，用以跨頁面通知。比如一個需要登錄的APP中，頁面會關(guān)注用戶登錄或注銷事件，來進(jìn)行一些狀態(tài)更新。
這時候，一個事件總線便會非常有用，事件總線通常實(shí)現(xiàn)了訂閱者模式，訂閱者模式包含發(fā)布者和訂閱者兩種角色，可以通過事件總線來觸發(fā)事件和監(jiān)聽事件。
對于一些簡單的應(yīng)用，事件總線是足以滿足業(yè)務(wù)需求的，如果決定使用狀態(tài)管理包的話，一定要想清楚APP是否真的有必要使用它，防止“化簡為繁”、過度設(shè)計。
例
在widget樹中，每一個節(jié)點(diǎn)都可以分發(fā)通知，通知會沿著當(dāng)前節(jié)點(diǎn)向上傳遞，所有父節(jié)點(diǎn)都可以通過NotificationListener來監(jiān)聽通知。
Flutter中將這種由子向父的傳遞通知的機(jī)制稱為通知冒泡（Notification Bubbling）。
通知冒泡和用戶觸摸事件冒泡是相似的，但有一點(diǎn)不同：通知冒泡可以中止，但用戶觸摸事件不行。
通知冒泡和Web開發(fā)中瀏覽器事件冒泡原理是相似的，都是事件從出發(fā)源逐層向上傳遞，可以在上層節(jié)點(diǎn)任意位置來監(jiān)聽通知/事件，也可以終止冒泡過程，終止冒泡后，通知將不會再向上傳遞。
Flutter的UI框架實(shí)現(xiàn)中，除了在可滾動組件在滾動過程中會發(fā)出ScrollNotification之外，還有一些其它的通知，如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等，F(xiàn)lutter正是通過這種通知機(jī)制來使父元素可以在一些特定時機(jī)來做一些事情。
例
例
例
阻止冒泡
通知冒泡原理
Flutter（五）手勢GestureDetector
在Android中，每一個 View 都可以通過 onTouch 方法重寫其觸摸事件，也可以通過 setOnClickListener 方法來給 View 設(shè)置點(diǎn)擊事件。但是Flutter中除了少部分組件，如 Button 相關(guān)的組件可以直接通過 onPressed 實(shí)現(xiàn)點(diǎn)擊事件。其余組件想實(shí)現(xiàn)點(diǎn)擊、長按等事件，都需要借助 GestureDetector 來實(shí)現(xiàn)手勢監(jiān)聽
下面介紹比較常用的手勢如 onTap （點(diǎn)擊）、 onDoubleTap （雙擊）、 onLongPress （長按）
小球跟隨手指移動的實(shí)現(xiàn)應(yīng)該是屬于各種移動端框架作為了解拖動手勢的的典型案例，下面我們來看看用flutter如何實(shí)現(xiàn)小球跟隨手指移動
拖動手勢主要由 onPanDown （手指按下）、 onPanUpdate （手指滑動）、 onPanEnd （滑動結(jié)束）構(gòu)成
縮放手勢需要用到 onScaleUpdate 方法，下面是一個簡單的圖片縮放的實(shí)現(xiàn)
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("手勢點(diǎn)擊");
? ? },
? ? onDoubleTap: () {
print("手指雙擊");
? ? },
? ? onLongPress: () {
print("長按手勢");
? ? },
? ? onPanUpdate: (value){
print('當(dāng)前我在滑動$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,
? ),
);
}
}
當(dāng)前標(biāo)題：flutter路由手勢的簡單介紹
標(biāo)題來源：http://www.dlmjj.cn/article/dsidopg.html
