压紧容器? ？

我有一个集装箱:

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

155711 次浏览
小开
最佳答案

我想你可以这样使用 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"),
]
),
)
);
小开

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

小开

只是想增加到 The Dumbfounds的答案(接受上面的答案)

If you are using 手势检测器 or 墨水井 to handle the click of a group of icon and text, then use Icon widget instead of 图标按钮 to display the icon as the onPressed method of IconButton will take over the onTap method of GestureDetector/InkWell and as a result the onTap then will only work if you click on the text.

例子-

@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'),
),
)
],
),
)
]);
}
}
小开

不要使用 GestureDetector，它不会产生连锁反应。改用 InkWell。

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

产出:

enter image description here

小开

容器本身没有任何 click 事件，因此有两种方法可以做到这一点

  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 更加通用，不仅用于触摸，还用于其他手势。

小开

前进

手势检测器 vs < strong > InkWell

You can use two widget

1)手势检测器

    GestureDetector(


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

这个小部件，没有任何效果。

2)墨水井

    InkWell(


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

这个小部件有动画效果。

小开

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

=====

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

======

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

使用 InkWell 它会给你提供一个很好的材质涟漪效果。

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

提交答案