flutter - Flutter - 容器 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()触发一个方法（例如可以这样做IconButton）。我怎样才能实现这种行为Container？

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，它不会显示涟漪效应。改为使用InkWell。

InkWell(
  onTap: () {}, // Handle your callback
  child: Ink(height: 100, width: 100, color: Colors.blue),
)

输出：

Answer 3

最简单的解决方案是将 包装在Container中，但如果您正在构建材料设计应用程序，请GestureRecognizer考虑使用InkWell或。FlatButton这些小部件在触摸时将显示视觉飞溅响应。

Answer 4

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

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 5

只是想补充一下The Dumbfounds 的答案（已接受）

如果您使用GestureDetector或InkWell来处理一组图标和文本的点击，则使用Icon小部件而不是IconButton来显示图标，因为 IconButton 的 onPressed 方法将接管 GestureDetector/InkWell 的 onTap 方法，结果只有当您单击文本时，onTap 才会起作用。

例子 -

@override
  Widget build(BuildContext context) {
    return Row(mainAxisSize: MainAxisSize.min, children: [
      GestureDetector(
        onTap: () {
          _toggleFavorite();
        },
        child: Row(
          children: [
            Container(
              padding: EdgeInsets.all(0.0),
              child: _isFavorited ? Icon(Icons.star, color: Colors.red[500]) : Icon(Icons.star_border),
            ),
            SizedBox(
              width: 18.0,
              child: Container(
                child: Text('$_favoriteCount'),
              ),
            )
          ],
        ),
      )
    ]);
  }
}

Answer 6

标题

GestureDetector与InkWell

您可以使用两个小部件

1) 手势检测器

    GestureDetector(

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

这个小部件，没有任何作用。

2) 墨水井

    InkWell(

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

这个小部件有动画效果。