Flutter - Container 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中实现此行为？

- OhMad

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"),
              ]
          ),
        )
    );

- guest3523

---

我想为容器添加“on tap”功能... 我已经尝试了墨水池和手势检测器，但两者都不起作用!!! - Ali Yar Khan

Answer 2

不要使用GestureDetector，它不会显示涟漪效果。 相反，请使用InkWell。

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

输出：

- CopsOnRoad

---

注意：如果在InkWell里使用Container，同时还使用了“decoration”，则可能不会出现涟漪效果。请参见https://dev59.com/4VUK5IYBdhLWcg3wqRdn。正如@CopsOnRoad所示，使用Ink可以支持几乎所有Container的功能。 - Nikhil Wagh

我想给容器添加“on tap”功能......我尝试了墨水井（Inkwell）和手势检测器（Gesture Detector），但两者都不起作用！！！ - Ali Yar Khan

使用容器和装饰时，我的 Ripple 效果未显示。 - Kristi Jorgji

@KristiJorgji 是的，这就是为什么你应该使用“Ink”而不是“Container”的原因。但是，你可以在容器中设置一些透明度的颜色以查看涟漪效果，但这更像是一个解决方法，可能并不总是符合你的需求。因此，最好像上面展示的那样使用“Ink”。 - CopsOnRoad

Answer 3

最简单的解决方案是将Container包含在GestureRecognizer中，但如果你正在构建一个Material Design应用程序，请考虑使用InkWell或FlatButton。这些小部件在被触摸时会显示视觉溅泼响应。

- Collin Jackson

Answer 4

容器本身没有任何点击事件，因此有两种方法可以实现：

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

在Flutter中，InkWell是一个反应触摸操作的材料小部件。

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

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

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

区别

InkWell是一个材料设计的小部件，当接收到触摸时可以显示涟漪效果。

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

- Jitesh Mohite

Answer 5

标题

GestureDetector 与 InkWell

你可以使用两个小部件

1) GestureDetector

    GestureDetector(

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

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

2) Inkwell

    InkWell(

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

此小部件具有动画效果。

- mohammad mobasher

Answer 6

我想在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'),
              ),
            )
          ],
        ),
      )
    ]);
  }
}

- Annsh Singh

Answer 7

InkWell(
    child: 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"),
            ]
        ),
    ),
    onTap: () { 
        print("Tapped on container"); 
    },
);

- Chanaka N. Bandara

Answer 8

用户可以使用Inkwell和GestureDetector来创建任何小部件的按钮。

InkWell(
    onTap: () { 
        print("Tapped"); 
    },
    child: Container(/* ... */),
);

GestureDetector(
    onTap: () { 
        print("Tapped"); 
    },
    child: Container(/* ... */),
)

- nitish chauhan

Answer 9

使用 GestureDetector 在 Container 上添加单击事件。将 Container 包裹在 GestureDetector 组件中：

GestureDetector(
    onTap: () { 
        print("Please tap here."); 
    },
    child: 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("Hello"),
          ]
        ),
    ),
),

- Rashmin Shingala

Answer 10

问题的实际答案

InkWell 是用户体验最好的选择。

 Container(            
        child: InkWell(
          onTap: () { //handle your callback   },
          child: Ink(
            color: Colors.amber,
            child: Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text('Click on me'),
            ),                  
          ),
        ),
      );

- infomasud