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

Question

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

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

Answer 1

颤动使用组合物超过属性.将所需的小部件包装成可点击的小部件,以实现您的需求.

一些可点击小工具:GestureDetector,InkWell,InkResponse.

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

Answer 2

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

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

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

Answer 4

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

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

另一种方式如下：

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

Answer 5

我想你也可以用墨水瓶除了GestureDetector只是包装卡内InkWell()的Widget

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

Answer 6

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

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

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

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

不同之处

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

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