Flutter Widget 如何启用和屏蔽点击事件

🔥 AbsorbPointer 介绍 🔥

官方说明
/// A widget that absorbs pointers during hit testing.
一个可拦截子视图点击事件的Widget .

/// When [absorbing] is true, this widget prevents its subtree from receiving
/// pointer events by terminating hit testing at itself.
当 absorbing 属性值为 true 时 , AbsorbPointer 将用户的点击事件消耗掉不让其子组件接收到 .

///It still consumes space during layout and paints its child as usual.
AbsorbPointer 会占用布局的空间并包裹在子组件外面 .

/// It just prevents its children
/// from being the target of located events, because it returns true from
/// [RenderBox.hitTest].
AbsorbPointer 的作用就是控制子Widget 获取用户的点击事件 , 但不能将它作为点击事件的目标 .

🔥 absorbing 属性 🔥

Flutter AbsorbPointer 属性absorbing 设置

Column(
          children: <Widget>[
            Container(
              width: 200.0,
              height: 200.0,
              margin: const EdgeInsets.only(top: 30.0),
              child: AbsorbPointer(
                absorbing: false,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.green.shade200,
                  ),
                  onPressed: () {
                    print("AbsorbPointer 子Widget ElevatedButton absorbing: false onPressed");
                  },
                  child: const Text("absorbing: false"),
                ),
              ),
            ),
            Container(
              width: 200.0,
              height: 200.0,
              margin: const EdgeInsets.only(top: 30.0),
              child: AbsorbPointer(
                absorbing: true,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.blue.shade200,
                  ),
                  onPressed: () {
                    print("AbsorbPointer 子Widget ElevatedButton absorbing: true onPressed");
                  },
                  child: const Text("absorbing: true"),
                ),
              ),
            ),
          ],
        )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

🔥 控制点击区域 🔥

当点击除开绿色和蓝色区域外的红色区域触发点击事件

AbsorbPointer 控制点击区域

Container(
            width: 300.0,
            height: 200.0,
            child: Stack(
              children: [
                Positioned(
                  left: 0.0,
                  top: 0.0,
                  right: 0.0,
                  bottom: 0.0,
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      primary: Colors.red.shade200,
                      padding: const EdgeInsets.all(40.0),
                    ),
                    onPressed: () {},
                    child: null,
                  ),
                ),
                Positioned(
                  left: 30.0,
                  right: 30.0,
                  top: 30.0,
                  child: SizedBox(
                    width: 200.0,
                    height: 100.0,
                    child: AbsorbPointer(
                      absorbing: true,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.green.shade200,
                        ),
                        onPressed: () {},
                        child: const Text("点击区域一"),
                      ),
                    ),
                  ),
                ),
                Positioned(
                  left: 30.0,
                  right: 30.0,
                  bottom: 10.0,
                  child: SizedBox(
                    width: 200.0,
                    height: 40.0,
                    child: AbsorbPointer(
                      absorbing: true,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.blue.shade200,
                        ),
                        onPressed: () {},
                        child: const Text("点击区域二"),
                      ),
                    ),
                  ),
                ),
              ],
            )),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

🔥 IgnorePointer介绍 🔥

官方说明
/// A widget that is invisible during hit testing.
一个在接收到点击事件过程中不可见的Widget .

/// When [ignoring] is true, this widget (and its subtree) is invisible to hit testing.
当 ignoring 属性值为true时 , IgnorePointer 在收到点击事件时是不可见的 .

It still consumes space during layout and paints its child as usual.
IgnorePointer 在收到点击事件后虽然不可见,但是会占用空间的,同时会完成子Widget的绘制 .

🔥 ignoring 属性 🔥

🔥 控制子Widget是否可点击 🔥

Container(
          width: 300.0,
          height: 200.0,
          color: Colors.red.shade200,
          child:  IgnorePointer(
              ignoring: false,
              key: ignorePointerKey,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.green.shade200,
                ),
                onPressed: () {
                  RenderBox? renderBox = ignorePointerKey.currentContext?.findRenderObject() as RenderBox?;
                  print("IgnorePointer onPressed 点击区域一 ${renderBox?.size}");
                },
                child: const Text("点击区域一"),
              ),
            ),
          ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

🔥 AbsorbPointer使用场景 🔥

常见组件会提供一种禁止输入的方法 .
例如 : 将TextButton的onPressed回掉设置为空值 .

const TextButton(
            child: Text("点击我"),
            onPressed: null,
          )
1
2
3
4

可以设置ListView 属性 physics , 让ListView不要滚动

ListView.builder(
              physics:  const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: 3,
              itemBuilder: (context, index) {
                return Container();
              })
1
2
3
4
5
6
7

当我们需要将屏幕范围内的所有组件都禁止操作 (点击、滚动、输入时) 时, 我们需要 将所有组件 用 AbsorbPointer包裹起来 , 并设置属性值 absorbing , 获取取消屏蔽也可以.

🔥 IgnorePointer 使用场景 🔥

用户和界面交互过程中 , 我们有时需要某些区域无法交互 , 就需要将无法被用户进行操作的区域用IgnorePointer 进行包裹 并且设置 ignoring 属性为true . 我们可以用IgnorePointer可以做到将包裹区域的子Widget 不能进行点击、单击、拖动、滚动、所有动作 .

🔥 AbsorbPointer和IgnorePointer 区别 🔥

Flutter小部件之AbsorbPointer
Flutter 浅谈AbsorbPointer和IgnorePointer的区别
深入研究flutter组件之（AbsorbPointer