Flutter事件監(jiān)聽(tīng)與EventBus事件的應(yīng)用詳解
在Flutter中,手勢(shì)有兩個(gè)不同的層次:
第一層:原始指針事件(Pointer Events)
第二層:手勢(shì)識(shí)別(Gesture Detector)
一 指針事件 Pointer
其原理是什么?
1 在指針落下的時(shí)候,框架做了一個(gè)hit test 的操作,確定與屏幕發(fā)生接觸的位置有哪些的Widget 以及分發(fā)給最內(nèi)部的組件去響應(yīng)
2 事件會(huì)沿著最內(nèi)部的組件向組件樹(shù)的根冒泡分發(fā)
3 并且不存在用于取消或者停止指針事件進(jìn)一步分發(fā)的機(jī)制
class _EventPointerDemoPageState extends State<EventPointerDemoPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("事件監(jiān)聽(tīng)"), ), body: Center( child: Listener( onPointerDown: (event) { // 相對(duì)于這個(gè)container 的 位置 print(event.localPosition); // 相對(duì)于屏幕的位置 print(event.position); // print("手指按下了$event"); }, onPointerMove: (event) { // print("手指移動(dòng)了$event"); }, onPointerUp: (event) { // print("手指抬起了$event"); }, child: Container( width: 200, height: 200, color: Colors.redAccent, ), )), ); } }
二 手勢(shì)識(shí)別
手勢(shì)識(shí)別Gesture 是對(duì)一系列Pointer的封裝,官方建議盡可能使用Gesture
1 點(diǎn)擊
onTapDown | 用戶發(fā)生手指按下的操作 |
onTapUp | 用戶發(fā)生手指抬起的操作 |
onTap | 用戶點(diǎn)擊事件完成 |
onTapCancel | 事件按下過(guò)程中被取消 |
2 雙擊
onDoubleTap | 快速點(diǎn)擊了兩次 |
3 長(zhǎng)按
onLongPress | 在屏幕上保持了一段時(shí)間 |
4 縱向拖拽
onVerticalDragStart | 指針和屏幕產(chǎn)生接觸并可能開(kāi)始縱向移動(dòng); |
onVerticalDragUpdate | 指針和屏幕產(chǎn)生接觸,在縱向上發(fā)生移動(dòng)并保持移動(dòng); |
onVerticalDragEnd | 指針和屏幕產(chǎn)生接觸結(jié)束 |
5 橫向拖拽
onHorizontalDragStart | 指針和屏幕產(chǎn)生接觸并可能開(kāi)始橫向移動(dòng); |
onHorizontalDragUpdate | 指針和屏幕產(chǎn)生接觸,在橫向上發(fā)生移動(dòng)并保持移動(dòng) |
onHorizontalDragEnd | 指針和屏幕產(chǎn)生接觸結(jié)束; |
6 移動(dòng)
onPanStart | 指針和屏幕產(chǎn)生接觸并可能開(kāi)始橫向移動(dòng)或者縱向移動(dòng)。如果設(shè)置了 onHorizontalDragStart 或者 onVerticalDragStart ,該回調(diào)方法會(huì)引發(fā)崩潰 |
onPanUpdate | 指針和屏幕產(chǎn)生接觸,在橫向或者縱向上發(fā)生移動(dòng)并保持移動(dòng)。如果設(shè)置了 onHorizontalDragUpdate 或者 onVerticalDragUpdate ,該回調(diào)方法會(huì)引發(fā)崩潰。 |
onPanEnd | 指針先前和屏幕產(chǎn)生了接觸,并且以特定速度移動(dòng),此后不再在屏幕接觸上發(fā)生移動(dòng)。如果設(shè)置了 onHorizontalDragEnd 或者 onVerticalDragEnd ,該回調(diào)方法會(huì)引發(fā)崩潰。 |
基本使用
_gestureDemo() { return GestureDetector( onTap: () { print("點(diǎn)擊事件完成了"); }, onPanEnd: (details) { print(details); }, onTapDown: (details) { // 相對(duì)于container print(details.localPosition); // 相對(duì)于屏幕的 print(details.globalPosition); }, onTapUp: (details) { // 抬起之后 才會(huì)調(diào)用 onTap ,證明點(diǎn)擊事件完成了 print("1111"); }, child: Container( width: 200, height: 200, color: Colors.blueAccent, ), ); }
三 跨組件事件的傳遞
多重組件的事件傳遞使用的是EventBus,很方便。
官方建議我們定義不同的Event ,從而區(qū)別不同的event
使用的是插件event_bus ,簡(jiǎn)單 的三步走操作
1 創(chuàng)建全局的event_bus,
import "package:event_bus/event_bus.dart"; // 定義一個(gè)全局的eventBus final eventBus = EventBus(); class MyEventMessage { String? name; String? action; MyEventMessage(this.name, this.action); }
2 fire
return ElevatedButton( onPressed: () { print("點(diǎn)擊事件"); // 第二步fire eventBus.fire(MyEventMessage("leonardo", "hahaha")); }, child: Text("改變文字")); }
3 listen
void initState() { // TODO: implement initState super.initState(); // 第三步監(jiān)聽(tīng)操作 eventBus.on<MyEventMessage>().listen((event) { print(event.name); setState(() { _name = event.name!; }); }); }
到此這篇關(guān)于Flutter事件監(jiān)聽(tīng)與EventBus事件的應(yīng)用詳解的文章就介紹到這了,更多相關(guān)Flutter事件監(jiān)聽(tīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解Android中App的啟動(dòng)界面Splash的編寫(xiě)方法
這篇文章主要介紹了Android中App的啟動(dòng)界面Splash的編寫(xiě)方法,需要的朋友可以參考下2016-02-02Android調(diào)用前后攝像頭同時(shí)工作實(shí)例代碼
本篇文章主要介紹了Android調(diào)用前后攝像頭同時(shí)工作實(shí)例代碼,這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-07-07Android創(chuàng)建外部lib庫(kù)及自定義View的圖文教程
這篇文章主要給大家介紹了關(guān)于Android創(chuàng)建外部lib庫(kù)及自定義View的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用詳解
這篇文章主要介紹了Android垂直切換的圓角Banner與垂直指示器相關(guān)介紹與應(yīng)用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10深入學(xué)習(xí)Kotlin?枚舉的簡(jiǎn)潔又高效進(jìn)階用法
這篇文章主要為大家介紹了深入學(xué)習(xí)Kotlin?枚舉簡(jiǎn)潔又高效的進(jìn)階用法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Android應(yīng)用實(shí)踐之?dāng)?shù)獨(dú)游戲開(kāi)發(fā)
這篇文章主要為大家詳細(xì)介紹了Android應(yīng)用實(shí)踐之?dāng)?shù)獨(dú)游戲開(kāi)發(fā),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android仿微信和QQ多圖合并框架(類(lèi)似群頭像)的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Android仿微信和QQ多圖合并框架的相關(guān)資料,其實(shí)就是我們平時(shí)所見(jiàn)的群聊頭像,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位Android開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12