Flutter 在整个屏幕上禁用触摸

Posted 2023-02-23

【中文标题】Flutter 在整个屏幕上禁用触摸

【英文标题】：Flutter disable touch on the entire screen

【发布时间】：2019-06-10 18:19:49

【问题描述】：

有什么方法可以阻止我的屏幕接收触摸事件，我不想为我的应用中的每个小部件禁用触摸。我只想锁定应用程序，使其不接收触摸事件。我该怎么做？

【问题讨论】：

docs.flutter.io/flutter/widgets/IgnorePointer-class.html

【参考方案1】：

您可以将您的小部件包装在AbsorbPointer 中，它不会收到触摸。要再次启用触摸，您可以设置absorbing: false

AbsorbPointer(
  child: YourWidget(...),
);

【讨论】：

真的是一个简短而甜蜜的方法。

【参考方案2】：

正如@Sanjayrajsinh 所说，我们可以通过两种方式做到这一点

AbsorbPointer上面给出了用过的答案

忽略指针

IgnorePointer 在命中测试期间不可见的小部件。

IgnorePointer的用法和AbsorbPointer一样，效果也一样。用法如下：

要禁用对小部件的触摸，您需要将整个小部件包装在 IgnorePointer 中

如果您在 Flutter 中使用 IgnorePointer Widget 包装任何小部件，则可以启用或禁用该小部件。这意味着如果您将整个 UI 包装在 IgnorePointer Widget 中，那么您可以通过切换 IgnorePointer Widget 的“ignoring”属性来控制该 UI 上的用户交互。当“ignoring”为真时，IgnorePointer 小部件会吸收小部件子级中的所有交互，并以某种方式禁用它。

IgnorePointer(
  child: Container(...),
),

【参考方案3】：

两种方法：

吸收指针 忽略指针

检查与此处示例的差异：

https://programmer.help/blogs/the-difference-between-flutter-absorbpointer-and-ignorepointer.html Flutter AbsorbPointer vs IgnorePointer difference

【参考方案4】：

让我们看一个使用IgnorePointer 小部件的实际示例。

当我们开始尝试实现诸如切换要删除的小部件上的选择之类的操作时，这种情况很常见。

结果：

Senario 示例： 按住 WhatsApp 消息并删除顶部的选项。如果在此选项处于活动状态时点击其他任何地方，它就会消失。

我是这样实现的。

appBar: AppBar(
         title: Text('MyApp'), 
         actions: [
            if (_selected != null) // <-- Delete button only appear something selected.
               IconButton(
               icon: Icon(Icons.delete),
               onPressed: ()  
                   // Delete Code here
               
         ]
      ),
body: GestureDetector(
           behavior: HitTestBehavior.opaque,
           onTap: ()  
                 print('Tapped');
                 setState(()  _selected = null );
           ,
           child: IgnorePointer(
           ignoring: _selected != null ? true : false, // <-- Ignore only when selecting something.
           child: Column(
             children: [
              ...

              // This is a sample message 

              GestureDetector(
              onLongPress: ()   
                 setState(()  _selected = messageId  );
              
              child: Container(
                 child: Text('This is a message'),
              ),
               
              ...

希望它会帮助别人！祝你有美好的一天。