Question

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

任何人都知道如何使整张卡片可点击？

Answer 1

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

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

new GestureDetector(
  onTap: ...,
  child: new Card(...),
);

Answer 2

Flutter提供了InkWell小部件。通过注册回调，您可以确定用户单击卡时发生的情况（称为“轻击”）。 InkWell还实现了Material Design波纹效果

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

Answer 3

我认为您也可以使用InkWell，只需将卡包装在InkWell()小部件中

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

Answer 4

最优选的方法是将ListTile添加为Card子级。 ListTile不仅包含方法onTap，还可以帮助您使Card变得有趣。

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

Answer 5

在Flutter中，InkWell是一种可响应触摸动作的材质小部件。

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

GestureDetector是检测手势的小部件。

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

差异

InkWell是一个材质小部件，每当收到触摸时，它就会向您显示波纹效果。

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

Answer 6

您也可以在 TextButton 中插入卡片：

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

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

Answer 7

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

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

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

步骤 1：- 将鼠标光标放在 Card 上，然后按 - Alt+Enter（在 Windows 中）select wrap with widget。

第 2 步：- 将您的默认小部件更改为 GestureDetector。

最终代码：-

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

Answer 8

将卡片包裹在 GestureDetector Widget 中，如下所示：

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

另一种方式如下：

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

Answer 9

大多数答案都很精彩，但我只想分享我的答案给那些想要在卡片或列表磁贴上制作/显示涟漪效果的人。

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

Answer 10

您可以使用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 {

      },
    ),
);

颤振：你如何使卡片可点击？

10 个答案: