Flutter - 容器 onPressed？答案

【问题标题】：Flutter - Container onPressed?Flutter - 容器 onPressed？
【发布时间】：2017-09-27 07:45:15
【问题描述】：

我有这个容器：

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

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案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"),
              ]
          ),
        )
    );

【讨论】：

我想为容器添加点击功能....也尝试过墨水池和手势检测器，但都不起作用！！！

【解决方案2】：

不要使用GestureDetector，它不会产生涟漪效应。请改用InkWell。

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

输出：

【讨论】：

仅供参考：如果您在 InkWell 中使用 Container，如果您也有 decoration，则可能不会出现波纹。见stackoverflow.com/questions/51463515/…。正如@CopsOnRoad 使用 Ink 所示，它支持几乎所有的容器功能。
我想为容器添加点击功能....也尝试过墨水池和手势检测器，但都不起作用！！！

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

InkWell 小部件
手势检测器

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

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

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

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

区别

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

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

【讨论】：

【解决方案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'),
              ),
            )
          ],
        ),
      )
    ]);
  }
}

【讨论】：

【解决方案6】：

GestureDetector VS InkWell

你可以使用两个小部件

手势检测器

手势检测器（

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

);

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

墨水瓶

墨井(

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

);

这个小部件有动画效果。

【讨论】：