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小部件。 通過注冊回調，您可以決定當用戶點擊卡片時會發生什么（在顫動中稱為點擊）。 InkWell還實現了 Material Design 漣漪效應

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

Answer 3

我想你也可以用墨水瓶除了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

在 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

最優選的方法是將ListTile添加為Card子項。 ListTile不僅包含onTap方法，它還可以幫助您使 Card 變得有趣。

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

Answer 7

您還可以將卡片插入 TextButton：

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

這帶來了優勢，您可以免費獲得一些功能。 例如在 Flutter Web 中，你會得到一個鼠標懸停效果，光標會變成手，這樣用戶就知道，他可以點擊那里。 可以使用樣式自定義其他附加功能。

Answer 8

在 Flutter 中點擊/點擊“孩子”做一些事情：-

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

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

第 1 步：- 將鼠標光標放在Card然后Alt+Enter （在 Windows 中） select wrap with widget 。

第 2 GestureDetector ：- 將您的默認小部件更改為GestureDetector 。

最終代碼：-

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

Answer 9

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

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

另一種方式如下：

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

Answer 10

大多數答案都很精彩，但我只想與想要在卡片或列表磁貼的 Tap 上制作/顯示連鎖反應的人分享我的答案。

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