使卡片完全可点击颤动

Question

我在拥有一张完全可点击的卡片时遇到了一点问题，情况是只有当点击测试时程序才会将其识别为点击，而在卡片的其他部分则没有。

部分代码如下：

GridView.builder(
              padding: const EdgeInsets.fromLTRB(15, 90, 15, 0),
              itemCount: services.lenght,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 1,
                childAspectRatio: MediaQuery.of(context).size.width/(MediaQuery.of(context).size.height/6),
              ),
              itemBuilder: (BuildContext context, int index){
                return Card(
                  child: Column(children: <Widget> [
                    SizedBox(
                      height: 2,
                      width: 10,
                    ),
                      Image.asset(images[index],height:55,width: 750,
                      ),
                      Padding(
                        padding: EdgeInsets.all(7),
                        child: GestureDetector(
                        onTap: (){
                          switch(index){
                            case 0:
                          Navigator.of(context).pushReplacementNamed(SearchGoods.routeName);
                              break;
                            case 1:
                             Navigator.of(context).pushReplacementNamed(Vehicles.routeName);
                            break;
                           }               
                          },
                        child: Text(services[index], 
                        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), 
                        textAlign: TextAlign.center,
                        )
                        )
                        ),
                  ],
                  ),
                );

Answer 1

答案是：

有时卡牌的主要行动区域是卡牌本身。卡片可以是一个大的触摸目标，点击时会显示详细信息屏幕。当点击这张卡片的 InkWell 时，会显示“墨水飞溅”并填满整张卡片。

所以InkWell的加入解决了问题。

代码如下：

return Card(
child: InkWell(
 splashColor: Colors.blue.withAlpha(30),
      onTap: () {
        switch(index){
                      case 0:
                      Navigator.of(context).pushReplacementNamed(SearchGoods.routeName);
                          break;
                        case 1:
                         Navigator.of(context).pushReplacementNamed(Vehicles.routeName);
                        break;
                       }      
      },
      child: Column (
      .
      .
      .
    )
 )
);

Answer 2

您可以通过将 Card 包装在 InkWell 小部件中或 GestureDetector 内部来实现。

这是最终示例应用程序的输出：

完整的工作代码：

import 'package:flutter/material.dart';

/* This is the data that we are going to use to render the grid of products using Gridview.
As pointed out by Pranay, you can use the fetched data from a remote server. 
but for the sake of simplicity, I am using hardcoded data. 
*/

List data = [
  {
    "id": 1,
    "name": "Mix Pina Colada 1",
    "desc": "Ice Cream Bar - Oreo Cone 1",
    "image": "http://dummyimage.com/110x138.png/dddddd/000000",
    "price": 93,
    "quantity": 0,
  },
  {
    "id": 2,
    "name": "Cake - Bande Of Fruit",
    "desc": "Cheese - Cheddar With Claret",
    "image": "http://dummyimage.com/172x223.png/cc0000/ffffff",
    "price": 4,
    "quantity": 0,
  },
  {
    "id": 3,
    "name": "Lid Coffee Cup 8oz Blk",
    "desc": "Rosemary - Primerba, Paste",
    "image": "http://dummyimage.com/110x243.png/ff4444/ffffff",
    "price": 18,
    "quantity": 0,
  },
];

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'GridView Example'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  List products = data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      appBar: AppBar(
        title: Text(title),
      ),
      body: GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        crossAxisCount: 2,
        children: products.map((product) {
          print(product["name"]);
          return InkWell(
            onTap: () {
             /* Using Navigator we will navigate to DetailsScreen, 
             along with it we will also pass the product object which 
             will be used to render the product details of the clicked item 
             */
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailsScreen(
                    product: product,
                  ),
                ),
              );
            },
            child: Container(
                color: Colors.white,
                padding: EdgeInsets.all(10),
                child: Text(product["name"])),
          );
        }).toList(),
      ),
    );
  }
}

/*
The following widget tasked the product object that we passed in 
Navigator, and displays the data of that particular product.
*/

class DetailsScreen extends StatelessWidget {
  final dynamic product;
  DetailsScreen({this.product});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(product["name"])),
      body: Column(
        children: [
          Image.network(
            product["image"],
            width: double.infinity,
            height: 200,
            color: Colors.amberAccent,
          ),
          Text("Name: " + product["name"]),
          Text("Description: " + product["desc"]),
          Text("Price: " + product["price"].toString()),
        ],
      ),
    );
  }
}

使卡片完全可点击颤动

making a card fully clickable flutter

mobile

android

ios

flutter

card