当前位置：首页 > article >正文

第二十四回：如何屏蔽事件

article 2024/9/22 20:30:29

文章目录

概念介绍
使用方法
- 限定事件范围
- 限定组件
示例代码
经验总结

我们在上一章回中介绍了事件处理相关的内容，,本章回中将介绍 如何屏蔽事件相关的知识.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在实际项目中不但需要处理各种点击事件，而且需要屏蔽部分点击事件，比如多个组件在一起时就会发生事件冲突。因此我们需要屏蔽部分组件的点击事件。本章回中将介绍如何屏蔽事件。此外，这里说的事件表示PointerEvent类及其子类所表示的事件。

使用方法

限定事件范围

我们可以把Listener组件放到一个容器中(Container类组件),然后通过容器来限制范围，这样只有指定范围内的事件才能被响应。这里说的限制范围本质上就限制容器的长度和宽度，对容器的长度和宽度进进限定后就能确定容器的大小，相当于在屏幕上划出了一块等于容器大小的区域，位于在该区域内的组件才能响应事件，位于该区域外的组件则不能响应事件。

如何判断组件是否位于区域内？看child属性对应的组件：Container的child属性对应Listener组件,Listener组件的child属性对应的组件就是位于区域内的组件。反之就是位于区域外的组件。

限定组件

我们还可以使用专门的组件来屏蔽事件，这个组件是IgnorePointer，该组件有一个child属性，与child属性对应的组件不会响应任何事件。如果我们不想让某个组件响应事件，那么可以把它赋值给IgnorePointer组件对应的child属性。

示例代码

return Scaffold(
  appBar: AppBar(
    title: const Text("Example of PointerEvent"),
    backgroundColor: Colors.purpleAccent,
  ),
  body: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Container(
        color: Colors.blue,
        alignment: Alignment.center,
        width: 200,
        height: 200,
        child: Listener(
            onPointerDown: _eventDown,
            onPointerMove: _eventMove,
            onPointerUp: _eventUp,
            child: const Text(
              "Event Listener inside",
              style: TextStyle(
                color: Colors.black87,
                fontSize: 16,
                backgroundColor: Colors.white,
              ),
            )),
      ),
      Listener(
        //Listener可以当作容器Widget包含其它Widget使用，也可以当作独立widget使用
        onPointerCancel: _eventCancle,
        onPointerDown: _eventDown,
        onPointerUp: _eventUp,
        onPointerMove: _eventMove,
        child: Container(
          color: Colors.orange,
          alignment: Alignment.center,
          constraints: const BoxConstraints(
            minWidth: 200,
            minHeight: 100,
          ),
          child: const Text(
            "Event Listener Outside",
            style: TextStyle(
              color: Colors.black87,
              backgroundColor: Colors.white,
            ),
          ),
        ),
      ),
      IgnorePointer(
        child: Container(
          color: Colors.lime,
          alignment: Alignment.center,
          width: 300,
          height: 100,
          child: Listener(
            onPointerDown: _eventDown,
            child: const Text(
              "Ignore Event Listener",
              style: TextStyle(
                color: Colors.black87,
                backgroundColor: Colors.white,
              ),
            ),
          ),
        ),
      ),
    ],
  ),
);

上面的代码中，在页面中放了三列：

第一列中在容器内嵌套了一个Listener，并且把Text组件赋值给了Listener组件，我们称其为"Event Listener inside".该内容中只有点击Text组件时才会响应事件，相当于屏蔽了Text组件外的事件。
第二列中在Listener内嵌套了一个容器组件，并且把Text组件赋值给了容器的child属性，我们称其为"Event Listener outside"，该内容中只要点击容器内的任何位置都可以响应事件，相当于屏蔽了容器外的事件。
第三列中在IgnorePointer组件内嵌套了一个容器组件，并且Text赋值给容器的child属性，我们称其为"Ignore Event Listener"，该内容中不论点击Text外还是Text内都不会响应事件。

程序中为了方便观察，我们给容器和Text添加了背景色，建议大家动手试试，通过程序打印的日志来观察是否响应了事件。