Flutter事件監聽與EventBus事件應用的方法是什么

這篇文章主要介紹“Flutter事件監聽與EventBus事件應用的方法是什么”，在日常操作中，相信很多人在Flutter事件監聽與EventBus事件應用的方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Flutter事件監聽與EventBus事件應用的方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一 指針事件 Pointer

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

2 事件會沿著最內部的組件向組件樹的根冒泡分發

3 并且不存在用于取消或者停止指針事件進一步分發的機制

class _EventPointerDemoPageState extends State<EventPointerDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("事件監聽"),
      ),
      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 點擊

2 雙擊

3 長按

4 縱向拖拽

5 橫向拖拽

6 移動

基本使用

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

三 跨組件事件的傳遞

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

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

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

1 創建全局的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();
    // 第三步監聽操作
    eventBus.on<MyEventMessage>().listen((event) {
      print(event.name);
      setState(() {
        _name = event.name!;
      });
    });
  }

到此，關于“Flutter事件監聽與EventBus事件應用的方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！