Flutter

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

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

Answer 3

只是想添加到 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 4

不要使用GestureDetector，它不会显示连锁反应。请改用InkWell。

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

输出：

Answer 5

容器本身没有点击事件，有两种方式

InkWell 小部件
手势检测器

在 Flutter 中，InkWell 是一个 material 响应触摸操作的小部件。

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

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

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

差异

InkWell 是一个 material 小部件，它可以在收到触摸时向您显示涟漪效果。

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

这个小部件有动画效果。

Answer 7

用户可以使用 Inkwell 和 GestureDetector 制作任何小部件的按钮。

=====

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

======

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

Answer 8

InkWell(
    child: Container(......),
    onTap: () { 
        print("Add your on tap event in this block"); 
    },
);

使用 InkWell 它会给你一个很好的 material 涟漪效果。

Flutter - 容器 onPressed？

Flutter - Container onPressed?

dart

flutter-layout

标题