Flutter onTap方法的容器

Question

正在开发一个扑腾的应用程序,并从一些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或GestureDetector.不同之处在于,它InkWell是一个材质小部件,显示接收到触摸的可视指示,而是GestureDetector一个更通用的小部件,不显示可视指示.

Answer 2

包裹内部容器墨水瓶（）窗口小部件可以解决这个问题，甚至 GestureDetector（）作为

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

使用手势检测器

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

Answer 3

截屏：

您不应该使用，GestureDetector因为它不会向您显示任何涟漪效应（这是 Material design 应用程序的核心部分），因此您可以使用InkWell，这是基本示例。

Widget _buildContainer() {
  return Material(
    color: Colors.blue,
    child: InkWell(
      onTap: () => print("Container pressed"), // handle your onTap here
      child: Container(height: 200, width: 200),
    ),
  );
}

Answer 4

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

解决方案是InkWell在Card.

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

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

Answer 5

区别

InkWell 是一个材质小部件，它可以在收到触摸时向您显示波纹效果。

GestureDetector 更通用，不仅用于触摸，还用于其他手势。

在 Flutter 中，InkWell 是一个响应触摸动作的材质小部件。

InkWell(
    child: Container(......),
    onTap: () { 
        print("Click event on Container"); 
    },
);

GestureDetector 是一个检测手势的小部件。

GestureDetector(
    onTap: () { 
        print("Click event on Container"); 
    },
    child: Container(.......),
)