android - 使卡片完全可点击的颤动
问题描述
我有一个完全可点击的卡有点问题,情况是只有当点击测试时程序才会识别为点击,卡的其他部分没有。
这是代码的一部分:
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,
)
)
),
],
),
);
解决方案
您可以通过将 包装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()),
],
),
);
}
}
推荐阅读
- symfony - 在控制器的构造函数中自动装配的 Symfony 4.4 服务没有从服务定义(setContainer)中获得调用
- r - 如何合并r中列表中包含的数据帧中的行
- php - 如何让 php 表单在谷歌云实例上工作?
- java - 使用 Big Integer 进行更高值的斐波那契计算的无限循环?
- .net-core - 0365 身份验证.NET CORE
- java - java.lang.AbstractMethodError:抽象方法“com.google.android.gms.tasks.Task Firebase 更新后
- parameters - 从 URL Yii2 获取参数
- android - 在 Android 7 Nougat Shell 中启动守护程序“未启用硬链接/软链接保护”时出现 Greengrass 错误
- reactjs - useContext 不在同一个渲染上更新
- scala - 使用 Gatling 对 SSO 登录 UI 应用程序进行性能测试