扑动: 你如何使一张卡片可点击？

我只是有一个简单的卡，如 new Card(child: new Text('My cool card'))，我想能够点击它的任何地方运行一些功能，除了没有 onPressed方法为卡。我可以在底部添加一个按钮，但这对于这种情况来说并不理想。

有人知道怎么让整张卡都可以点击吗？

121862 次浏览
小开
最佳答案

颤振使用组合超过属性。 将所需的小部件包装成一个可点击的小部件，以实现您所需的目标。

一些可点击的小部件: GestureDetector，InkWell，InkResponse。

GestureDetector(
onTap: () => ......,
child: Card(...),
);
小开

我认为你也可以使用 墨水井除了 手势检测器只是包装内部的 InkWell()插件卡

InkWell(
onTap: (){ print("Card Clicked"); }
child: new Card(),
);
小开

Flutter 提供了 墨水井小部件。通过注册一个回调，你可以决定当用户点击卡片时会发生什么(称为轻拍颤动)。墨水井还实现了材料设计波纹效应

Card(
child: new InkWell(
onTap: () {
print("tapped");
},
child: Container(
width: 100.0,
height: 100.0,
),
),
),
小开

您可以使用 Inkwell 并插入 splashColor，只要用户单击它，就会在卡片上创建所选颜色的回弹效果。. This is mainly used in material design.

return Card(
color: item.completed ? Colors.white70 : Colors.white,
elevation: 8,
child: InkWell(
splashColor: "Insert color when user tap on card",
onTap: () async {


},
),
);
小开

最好的方法是将 ListTile添加为 Card子级。ListTile不仅包含方法 onTap，它也帮助您在使卡有趣。

Card(
child: ListTile(
title: Text('Title')
leading: CircleAvatar(
backgroundImage: AssetImage('assets/images/test.jpg'),
),
onTap: () {
print('Card Clicked');
},
),
),
小开

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

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

GestureDetector is a widget that detects the gestures.

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

区别

InkWell 是一个材质小工具，它可以显示你的涟漪效果每当触摸被接收。

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

小开

您还可以将一张卡片插入 TextButton:

TextButton clickableCard = TextButton(child: card, onPressed: onCardClick, style: [...]);

这带来了一个优势，您可以免费获得一些特性。例如在 Flutter Web 中，你得到一个鼠标移动效果，光标移动到手上，这样用户就可以知道，他可以点击那里。其他附加特性可以使用样式进行定制。

小开

Do something on tap/click of 'child' in Flutter:-

代码:-你的代码看起来像:

child: Card(------
------------
--------),

步骤1 :-将鼠标光标放在 Card上，然后按 -Alt+Enter(在窗口中) select wrap with widget。

步骤2 :-将默认小部件更改为 GestureDetector。

最终代码:-

child: GestureDetector(
onTap: YourOnClickCode(),
child: Card(------
------------
--------),
),
小开

Wrap a card in GestureDetector Widget like a below:

 GestureDetector(
onTap: () {
// To do
},
child: Card(
     

),
),

Another way is as follows:

InkWell(
onTap: () {
// To do
},
child: Card(),
),
小开

大多数的答案都很棒，但是我只是想分享我的答案给那些想要在点击卡片或列表块时产生涟漪效应的人。

Card(
child: TextButton(
onPressed: ()=> ...,
child: ListTile(
title: Text('title'),
),
),
);

提交答案