Flutter：如何使卡片可点击？

Question

我只有一个像

new Card(child: new Text('My cool card'))

这样的简单卡片，我希望能够点击它的任何地方来运行一些功能，除了卡片没有

onPressed

方法。我可以在底部添加一个按钮，但这对这种情况来说并不理想。

有人知道如何让整张卡片都可以点击吗？

Answer 1

Flutter 使用组合而不是属性。 将所需的小部件包装成可点击的小部件，以实现您所需要的。

一些可点击的小部件：

GestureDetector

，

InkWell

，

InkResponse

.

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

Answer 2

Flutter 提供了 InkWell 小部件。通过注册回调，您可以决定当用户点击卡片时会发生什么（在 flutter 中称为点击）。 InkWell 还实现了 Material Design 涟漪效应

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

Answer 3

我想你也可以使用 InkWell 除了 GestureDetector 只需将卡片包裹在里面

InkWell()

Widget

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

Answer 4

您可以使用 Inkwell 并插入 splashColor，在用户单击时，它会在卡片上创建具有所选颜色的反弹效果 .. 这主要用于材料设计。

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

      },
    ),
);

Answer 5

像下面这样在 GestureDetector Widget 中包装一张卡片：

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

另一种方式如下：

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

Answer 6

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

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

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

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

区别

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

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

Answer 7

最优选的方式是将

ListTile

添加为

Card

孩子。

ListTile

不仅包含方法

onTap

它还可以帮助您使Card变得有趣。

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

Answer 8

您还可以将卡片插入 TextButton：

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

这带来了好处，您可以免费获得一些功能。例如在 Flutter Web 中，你会得到一个鼠标悬停效果，光标会变成手，这样用户就知道，他可以点击那里。可以使用样式自定义其他附加功能。

Answer 9

在 Flutter 中点击/点击“孩子”做一些事情：-

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

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

Step1：-将鼠标光标放在

Card

上，然后按-

Alt+Enter

（在Windows中）

select wrap with widget

.

Step2：-将您的默认小部件更改为

GestureDetector

.

最终代码：-

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

Answer 10

大多数答案都很棒，但我只想与那些想要在点击卡片或列表块上制作/显示连锁反应的人分享我的答案。

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

Answer 11

如果您希望在单击

Card

时获得更好的用户体验，我建议您将

InkWell

添加为

Card

的孩子。这会在单击

Card

时提供真正的 Material 3 效果。下面的代码片段就是这样做的：

return Card(
  child: InkWell(
    borderRadius: BorderRadius.circular(12.0),
    onTap: () {},
    child: Column(
      children: [
        Text(
          'This is a Clickable Card!',
          style: TextStyle(fontSize: 20.0),
          ),
        Text('Try This Out!'),
      ],
    ),
  ),
);

只要

onTap

不为空（具有 (){} 足以使其不为空），您最终将获得所需的飞溅效果，并且您将拥有可点击的

Card

。此外，Flutter 3.7.10 中当前的

Card

小部件带有

borderRadius: BorderRadius.circular(12.0)

。因此，有必要将相同的属性添加到

InkWell

以获得更好的用户体验。