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

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

SetNull

使用手势检测器

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

Answer 3

差异

InkWell是一个材质小部件，只要收到触摸，它就会向您显示波纹效果。

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

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

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

GestureDetector是检测手势的小部件。

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

Answer 4

除了其他人在回答中说的话，如果您在Card中使用InkWell，那么InkWell将会掩盖Android上的涟漪效应-您可以看到它在后台发生但不在卡本身上。

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

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

这将帮助您获得波纹效果并在Android上也执行拍击捕获。

Answer 5

截屏：

您不应该使用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),
    ),
  );
}

Flutter onTap方法的容器

5 个答案: