Flutter：如何让卡片可点击？

Posted 2023-02-22

【中文标题】Flutter：如何让卡片可点击？

【英文标题】：Flutter: How do you make a card clickable?

【发布时间】：2018-10-02 05:34:15

【问题描述】：

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

有人知道如何使整张卡片可点击吗？

【问题讨论】：

你试过用GestureDetector包装吗？

【参考方案1】：

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

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

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

【讨论】：

有手势检测器列表时效果如何，我最感兴趣的是它在列表视图中的使用

那是一样的东西。

@RémiRousselet 这很好用。但它没有表现出任何连锁反应。我尝试将它包装在InkWell 中，即使它未能显示出涟漪效应。似乎我们需要做更多的嵌套，比如this

@RémiRousselet 绝对正确。但我想也许我错过了一些微小的东西（一些财产），你的评论可能会有所帮助。但无论如何，我真的很感谢你的回答。

@CopsOnRoad 要产生连锁反应，您可能需要将Card 的child 包裹在InkWell 内。涟漪效应无法在您的案例中显示，因为它将位于Card 后面。

【参考方案2】：

我想你也可以使用InkWell 除了GestureDetector 只需将卡片包裹在InkWell() Widget 中

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

【讨论】：

我必须将 InkWell 放入 Card 小部件中才能获得涟漪效果

卡片（child: InkWell()）更好

【参考方案3】：

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

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

【讨论】：

在我看来，墨水瓶应该在卡片外面

@forresthopkinsa：这取决于您想要实现的目标。如果你想让卡片充满“墨水”，那么 InkWell 应该在卡片里面。相反，如果 InkWell 包裹卡片，则卡片外部（但不在卡片内部）的区域（默认为矩形）将填充“墨水”。您甚至可以在卡片的内部和外部各有一个墨水瓶——这两个区域都充满了“墨水”。

我认为问题是让整个卡片可点击，而不是卡片内的 100x100 容器

@nonbeing sure，这是有道理的

【参考方案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 

      ,
    ),
);

【讨论】：

您能解释一下您的答案与其他推荐InkWell 的答案有何不同吗？

我只是输入了这个答案，因为在其他人中没有 splashColor ，在用户点击时，在卡片上使用所选颜色创建反弹效果..这主要用于材料设计

@AlexPad，答案很重要。鉴于 onTap() 的快速转换，高亮颜色可能是更好的选择。

【参考方案5】：

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

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

【讨论】：

ListTile 使我无法单独使用 Card 实现哪些功能（除了手势检测）？

【参考方案6】：

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

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

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

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

区别

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

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

【参考方案7】：

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

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

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

【参考方案8】：

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

代码：-您的代码如下所示：

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

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

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

最终代码：-

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

【参考方案9】：

在 GestureDetector Widget 中包装一张卡片，如下所示：

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

另一种方式如下：

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

【参考方案10】：

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

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