容器的 Flutter onTap 方法

Posted 2023-03-25

【中文标题】容器的 Flutter onTap 方法

【英文标题】：Flutter onTap method for Containers

【发布时间】：2017-11-03 04:07:47

【问题描述】：

一直在开发 Flutter 应用并根据一些 Firebase 数据动态构建一些容器。 我想知道是否有办法为容器（或任何不是按钮的小部件）获取 onTap 方法？

这是一个代码示例：

  child: new Container(

    //INSERT ONTAP OR ONPRESSED METHOD HERE

    margin: const EdgeInsets.symmetric(vertical: 10.0),
    child: new Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        new Container(
          margin: const EdgeInsets.only(right: 16.0),
          child: new GoogleUserCircleAvatar(snapshot.value['images'][0]),
        ),
        new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children : [
            new Container(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: new Text("$snapshot.value['name']",
                style: new TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
             ),
            new Text("$snapshot.value['description']",
              style: new TextStyle(
                color: Colors.grey[500],
              ),
            ),
          ]
        )
      ],
    ),

【参考方案1】：

您可以将Container 包装在InkWell 或GestureDetector 中。不同之处在于，InkWell 是一个材质小部件，它显示接收到触摸的视觉指示，而 GestureDetector 是一个更通用的小部件，不显示任何视觉指示。

【讨论】：

另一个观察：InkWell 展开并覆盖所有容器区域以处理 ontap 事件而不是 GestureDector。

【参考方案2】：

将容器包装在 Inkwell() 小部件中可以解决问题，甚至 GestureDetector() 作为

  InkWell(                        
        child: Container(...),                        
        onTap: ()                           
        print("tapped on container");
        ,                      
     );

使用手势检测器

GestureDetector(
  onTap: ()  print("Container was tapped"); ,
  child: Container(...),
)

【讨论】：

谢谢，我使用了 GestureDetector 但 onTap 在可用空间中不起作用，只有当我单击容器中的子小部件时才起作用，但 Inkwell 非常好。

我在使用 GestureDetector 时遇到了同样的问题。令人惊讶的是，通过添加容器的背景颜色解决了这个问题。

对于 Reza 和 Donatas，可能需要设置 GestureDetector 的“行为”选项

如果您使用背景颜色“Colors.transparent”，那么 GestureDetector 将识别点击（但视觉外观仍然相同）。

正如 BuffK 提到的，设置 behavior: HitTestBehavior.opaque 修复了空点击问题。 HitTestBehavior.translucent 也修复了这个问题，不同的是底层小部件也会接收事件。

【参考方案3】：

截图：

---

您可以同时使用GestureDetector 和InkWell，但我建议您使用InkWell，因为它可以显示GestureDetector 不能显示的涟漪效应。

GestureDetector 和 InkWell 之间的区别：

两者有许多共同点，如onTap、 onLongPress 等。主要区别在于GestureDetector 具有更多控件，如拖动等。另一方面，InkWell 提供了一些不错的连锁反应。

您可以根据需要使用其中任何一种。如果您想要涟漪效果，请选择InkWell，如果您需要更多控件，请选择GestureDetector，甚至将两者结合使用。

Material(
  color: Colors.blue, // Background color
  child: InkWell(
    splashColor: Colors.grey, // Splash color
    onTap: () => print("Container pressed"), // Handle your onTap here.
    child: Container(height: 200, width: 200),
  ),
)

【讨论】：

我一直在想办法用 InkWell 将波纹效果添加到容器中。谢谢！

【参考方案4】：

除了其他人在回答中所说的之外，如果您在InkWell 中使用Card，那么InkWell 将隐藏android 上的涟漪效应——您可以看到它在后台发生，但看不到卡本身.

解决方案是在Card 内创建一个InkWell。

return Card(
  child: InkWell(
    child: Row(
      // Row content
    ),
    onTap: () => 
      print("Card tapped.");
    ,
  ),
  elevation: 2,
);

这将帮助您获得涟漪效应并在 Android 上执行点击捕获。