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

实现这种行为？

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

中，但如果您正在构建 Material Design 应用程序，请考虑使用

InkWell

或

FlatButton

。这些小部件在触摸时会显示视觉飞溅响应。

Answer 4

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

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

在 Flutter 中，InkWell 是响应触摸动作的材质 widget。

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

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

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

区别

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

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

Answer 5

标题

GestureDetector 与InkWell

您可以使用两个小部件

1）手势检测器

    GestureDetector(

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

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

2) InkWell

    InkWell(

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

这个小部件有动画效果。

Answer 6

只是想添加到 The Dumbfounds 答案（上面接受的答案）

如果您使用 GestureDetector 或 InkWell 来处理一组图标和文本的点击，那么使用 Icon 小部件而不是 IconButton 来显示图标，因为 IconButton 的 onPressed 方法将接管 onTap GestureDetector/InkWell 的方法，因此 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 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"); 
    },
);

Answer 8

用户可以使用

Inkwell

和

GestureDetector

制作任何小部件的按钮。

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

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

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

Answer 10

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

使用

InkWell

，因为它会给你一个很好的材质波纹效果。