颤动 - 容器onPressed？

Question

我有这个容器:

          new Container(
            width: 500.0,
            padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
            color: Colors.green,
            child: new Column(
              children: [
                new Text("Ableitungen"),
              ]
            ),
          ),

当用户点击Container时,我想要一个onPressed方法被触发(例如,可以用IconButtons完成).如何使用容器实现此行为？

提前致谢

Answer 1

我想你可以像这样使用GestureDetector小部件:

new GestureDetector(
        onTap: (){
          print("Container clicked");
        },
        child: new Container(
          width: 500.0,
          padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
          color: Colors.green,
          child: new Column(
              children: [
                new Text("Ableitungen"),
              ]
          ),
        )
    );

Answer 2

您不应该使用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 3

如果你想要一个简单的点击事件，那么你可以通过GestureDetector

GestureDetector(
    onTap: (){
      print("Container clicked");
    },
    child: new Container(...)          
);

如果您想要点击事件上的波纹动画，请使用InkWell

InkWell(
    onTap: (){
      print("Container clicked");
    },
    child: new Container(...)          
);

Answer 4

最简单的解决方案是将其包装成Containera GestureRecognizer,但考虑使用InkWell或者FlatButton如果您正在构建Material Design应用程序.触摸时,这些小部件将显示视觉飞溅响应.

Answer 5

容器本身没有任何点击事件，所以有两种方法

1. InkWell 小部件
2. 手势检测器

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

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

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

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

区别

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

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

Answer 6

标题

GestureDetector与InkWell

您可以使用两个小部件

1) 手势检测器

    GestureDetector(

        onTap: (){
          print("Container clicked");
        },
        child: new Container(child: ...)          
    );

这个小部件，没有任何效果。

2) 墨水池

    InkWell(

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

这个小部件有动画效果。