Flutter事件監(jiān)聽與EventBus事件的應(yīng)用詳解

更新時間：2023年04月13日 09:20:46 作者：iOS_Apple

EventBus的核心是基于Streams。它允許偵聽器訂閱事件并允許發(fā)布者觸發(fā)事件，使得不同組件的數(shù)據(jù)不需要一層層傳遞，可以直接通過EventBus實現(xiàn)跨組件通訊

一指針事件 Pointer

其原理是什么？

1 在指針落下的時候，框架做了一個hit test 的操作，確定與屏幕發(fā)生接觸的位置有哪些的Widget 以及分發(fā)給最內(nèi)部的組件去響應(yīng)

2 事件會沿著最內(nèi)部的組件向組件樹的根冒泡分發(fā)

3 并且不存在用于取消或者停止指針事件進(jìn)一步分發(fā)的機(jī)制

class _EventPointerDemoPageState extends State<EventPointerDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("事件監(jiān)聽"),
      ),
      body: Center(
          child: Listener(
        onPointerDown: (event) {
          // 相對于這個container 的 位置
          print(event.localPosition);
          // 相對于屏幕的位置
          print(event.position);
          // print("手指按下了$event");
        },
        onPointerMove: (event) {
          // print("手指移動了$event");
        },
        onPointerUp: (event) {
          // print("手指抬起了$event");
        },
        child: Container(
          width: 200,
          height: 200,
          color: Colors.redAccent,
        ),
      )),
    );
  }
}

二手勢識別

手勢識別Gesture 是對一系列Pointer的封裝，官方建議盡可能使用Gesture

1 點擊

onTapDown	用戶發(fā)生手指按下的操作
onTapUp	用戶發(fā)生手指抬起的操作
onTap	用戶點擊事件完成
onTapCancel	事件按下過程中被取消

2 雙擊

onDoubleTap

快速點擊了兩次

3 長按

onLongPress

在屏幕上保持了一段時間

4 縱向拖拽

onVerticalDragStart	指針和屏幕產(chǎn)生接觸并可能開始縱向移動；
onVerticalDragUpdate	指針和屏幕產(chǎn)生接觸，在縱向上發(fā)生移動并保持移動；
onVerticalDragEnd	指針和屏幕產(chǎn)生接觸結(jié)束

5 橫向拖拽

onHorizontalDragStart	指針和屏幕產(chǎn)生接觸并可能開始橫向移動；
onHorizontalDragUpdate	指針和屏幕產(chǎn)生接觸，在橫向上發(fā)生移動并保持移動
onHorizontalDragEnd	指針和屏幕產(chǎn)生接觸結(jié)束；

6 移動

onPanStart	指針和屏幕產(chǎn)生接觸并可能開始橫向移動或者縱向移動。如果設(shè)置了 `onHorizontalDragStart` 或者 `onVerticalDragStart`，該回調(diào)方法會引發(fā)崩潰
onPanUpdate	指針和屏幕產(chǎn)生接觸，在橫向或者縱向上發(fā)生移動并保持移動。如果設(shè)置了 `onHorizontalDragUpdate` 或者 `onVerticalDragUpdate`，該回調(diào)方法會引發(fā)崩潰。
onPanEnd	指針先前和屏幕產(chǎn)生了接觸，并且以特定速度移動，此后不再在屏幕接觸上發(fā)生移動。如果設(shè)置了 `onHorizontalDragEnd` 或者 `onVerticalDragEnd`，該回調(diào)方法會引發(fā)崩潰。

基本使用

_gestureDemo() {
    return GestureDetector(
      onTap: () {
        print("點擊事件完成了");
      },
      onPanEnd: (details) {
        print(details);
      },
      onTapDown: (details) {
        // 相對于container
        print(details.localPosition);
        // 相對于屏幕的
        print(details.globalPosition);
      },
      onTapUp: (details) {
        // 抬起之后 才會調(diào)用 onTap ，證明點擊事件完成了
        print("1111");
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blueAccent,
      ),
    );
  }

三跨組件事件的傳遞

多重組件的事件傳遞使用的是EventBus，很方便。

官方建議我們定義不同的Event ,從而區(qū)別不同的event

使用的是插件event_bus ,簡單的三步走操作

1 創(chuàng)建全局的event_bus，

import "package:event_bus/event_bus.dart";
// 定義一個全局的eventBus
final eventBus = EventBus();
class MyEventMessage {
  String? name;
  String? action;
  MyEventMessage(this.name, this.action);
}

2 fire

 return ElevatedButton(
        onPressed: () {
          print("點擊事件");
          // 第二步fire
          eventBus.fire(MyEventMessage("leonardo", "hahaha"));
        },
        child: Text("改變文字"));
  }

3 listen

 void initState() {
    // TODO: implement initState
    super.initState();
    // 第三步監(jiān)聽操作
    eventBus.on<MyEventMessage>().listen((event) {
      print(event.name);
      setState(() {
        _name = event.name!;
      });
    });
  }

到此這篇關(guān)于Flutter事件監(jiān)聽與EventBus事件的應(yīng)用詳解的文章就介紹到這了,更多相關(guān)Flutter事件監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: