容器的 Flutter onTap 方法

Question

一直在开发一个 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],
              ),
            ),
          ]
        )
      ],
    ),

Answer 1

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

Answer 2

您可以将容器包装在 Inkwell() 或 GestureDetector() 中，如下所示

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

使用手势检测器

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

两者之间的唯一区别是 InkWell 在指针与屏幕接触时提供涟漪效果，而 GestureDetector 则没有这种视觉反馈。

Answer 3

除了其他人在回答中所说的，如果你在InkWell中使用Card，那么InkWell将隐藏对Android的涟漪效应——你可以看到它在后台发生，而不是在卡本身上。

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

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

这将帮助您获得连锁反应并在 Android 上执行点击捕获。

Answer 4

截图：

您可以同时使用 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),
  ),
)

容器的 Flutter onTap 方法

Flutter onTap method for Containers

user-interface

button

dart

flutter