Flutter 开发 GestureDetector与Listener的点击冒泡与穿透

Sakuramissing

已于 2024-01-03 16:25:27 修改

阅读量1.7k

点赞数 14

CC 4.0 BY-SA版权

分类专栏： Flutter 爬坑日记文章标签： flutter 前端

于 2024-01-03 13:55:14 首次发布

本文链接：https://blog.csdn.net/Sakuramissing/article/details/135361368

Flutter 爬坑日记专栏收录该内容

14 篇文章

订阅专栏

本文比较了GestureDetector和Listener在处理子组件点击事件时的不同行为：GestureDetector阻止冒泡，只响应最内层；Listener则进行事件穿透，从上到下响应。开发者应根据需求选择合适的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发过程中，我们经常遇到父组件A有点击事件，其子组件B也有点击事件的情况，我们都知道GestureDetector和Listener都能实现对点击事件的监听，两者有什么不同的表现呢？实验如下：

1、子父节点都是GestureDetector的情况

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              print("parent");
            },
            child: Container(
              height: MediaQuery.of(context).size.height * 0.3,
              color: Colors.amber,
              child: GestureDetector(
                onTap: () {
                  print("child");
                },
                child: Align(
                    alignment: Alignment.center,
                    child: Container(
                      height: 80.0,
                      color: Colors.blueAccent,
                      width: MediaQuery.of(context).size.width * 0.2,
                    )),
              ),
            ),
          )
        ]);
  }
}

实际效果是：点击蓝色部分只打印“child”，点击黄色部分打印“parent”。

结论：GestureDetector会阻止冒泡，只执行最里面一层。

2、父节点为GestureDetector，子节点为Listener

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              print("parent");
            },
            child: Container(
              height: MediaQuery.of(context).size.height * 0.3,
              color: Colors.amber,
              child: Listener(
                onPointerDown: (e) {
                  print("child");
                },
                child: Align(
                    alignment: Alignment.center,
                    child: Container(
                      height: 80.0,
                      color: Colors.blueAccent,
                      width: MediaQuery.of(context).size.width * 0.2,
                    )),
              ),
            ),
          )
        ]);
  }
}

实际效果是：点击蓝色部分先打印“child”再打印“parent”，点击黄色部分打印“parent”。

结论：Listener会进行事件穿透，多层响应

3、父节点为Listener，子节点为GestureDetector

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Listener(
            onPointerDown: (e) {
              print("parent");
            },
            child: Container(
              height: MediaQuery.of(context).size.height * 0.3,
              color: Colors.amber,
              child: GestureDetector(
                onTap: () {
                  print("child");
                },
                child: Align(
                    alignment: Alignment.center,
                    child: Container(
                      height: 80.0,
                      color: Colors.blueAccent,
                      width: MediaQuery.of(context).size.width * 0.2,
                    )),
              ),
            ),
          )
        ]);
  }
}

实际效果是：点击蓝色部分先打印“parent”再打印“child”，点击黄色部分打印“parent”。

结论：Listener会进行事件穿透，多层响应，由上往下

4、子父节点都是Listener

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Listener(
            onPointerDown: (e) {
              print("parent");
            },
            child: Container(
              height: MediaQuery.of(context).size.height * 0.3,
              color: Colors.amber,
              child: Listener(
                onPointerDown: (e) {
                  print("child");
                },
                child: Align(
                    alignment: Alignment.center,
                    child: Container(
                      height: 80.0,
                      color: Colors.blueAccent,
                      width: MediaQuery.of(context).size.width * 0.2,
                    )),
              ),
            ),
          )
        ]);
  }
}

实际效果是：点击蓝色部分先打印“child”再打印“parent”，点击黄色部分打印“parent”。

结论：Listener会进行事件穿透，多层响应

总结：

GestureDetector会阻止事件的冒泡传递，只执行最里面一层；Listener会进行事件穿透，多层响应，并从上往下进行响应。实际项目中要根据需要适合搭配使用~