我想使用 flutter 在网格视图中导航我的卡片。 我的卡片包含图像而不是图标

Question

import 'package:testapp/TryNavigate.dart';
import 'package:testapp/TryNavigate2.dart';

class CategoriesMain extends StatefulWidget {
@override
_CategoriesMainState createState() => _CategoriesMainState();
}

class _CategoriesMainState extends State<CategoriesMain> {
@override
Widget build(BuildContext context) {
 return new Scaffold(
   body: Products(),
 );
}
}

class Products extends StatefulWidget {
@override
_ProductsState createState() => _ProductsState();
}

class _ProductsState extends State<Products> {



final list_item = [
 {
   "name": "Baby Stuffs",
   "pic": "images/baby.png",
   "price": 70,
 },
 {
   "name": "Fruits",
   "pic": "images/fruits.png",
   "price": 70,
 },
 {
   "name": "Fruits",
   "pic": "images/start.jpg",
   "price": 70,
 },
 {
   "name": "Beverages",
   "pic": "images/beverages.png",
   "price": 70,
 },
 {
   "name": "Bread",
   "pic": "images/bread.jpg",
   "price": 70,
 },
 {
   "name": "Canneds Goods",
   "pic": "images/cannedgoods.png",
   "price": 70,
 },
 {
   "name": "Condiments",
   "pic": "images/condiments.png",
   "price": 70,
 },
 {
   "name": "Snacks",
   "pic": "images/snacks.png",
   "price": 70,
 },
 {
   "name": "Dairy, Eggs",
   "pic": "images/dairy2.jpg",
   "price": 70,
 },
 {
   "name": "Signature Cafes",
   "pic": "images/cafe.jpg",
   "price": 70,
 },
 {
   "name": "Frozen Foods",
   "pic": "images/frozenfoods.jpg",
   "price": 70,
 },
 {
   "name": "Grains, Pasta",
   "pic": "images/grains.jpg",
   "price": 70,
 },
 {
   "name": "Meat and Seafood",
   "pic": "images/meat.jpg",
   "price": 70,
 },
 {
   "name": "Miscellaneous",
   "pic": "images/misc.jpg",
   "price": 70,
 },
 {
   "name": "Paper Products",
   "pic": "images/paperproducts.jpg",
   "price": 70,
 },
 {
   "name": "Cleaning Supplies",
   "pic": "images/cleaning supplies.png",
   "price": 70,
 },
 {
   "name": "Personal Care",
   "pic": "images/personalcare.jpg",
   "price": 70,
 },
 {
   "name": "Pet Care",
   "pic": "images/petcare.jpg",
   "price": 70,
 },
];


@override
Widget build(BuildContext context) {
 return GridView.builder(
     itemCount: list_item.length,
     gridDelegate:
         SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     itemBuilder: (BuildContext context, int index) {
       return Product(
         product_name: list_item[index]['name'],
         product_pic: list_item[index]['pic'],
         product_price: list_item[index]['price'],
       );
     });
}
}


class Product extends StatelessWidget {

final product_name;
final product_pic;
final product_price;

Product({this.product_name, this.product_pic, this.product_price});

@override
Widget build(BuildContext context) {
 return Card(
     semanticContainer: true,
     shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(15.0),
     ),
     clipBehavior: Clip.antiAlias,
     child: Material(
         child: InkWell(
     splashColor: Colors.pink,
     child: Center(
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           Expanded(
               child: Container(
             decoration: BoxDecoration(
               image: DecorationImage(
                   image: AssetImage(product_pic), fit: BoxFit.fill),
             ),
           )),
           Padding(
               padding: EdgeInsets.all(10.0),
               child: Text(
                 product_name,
                 style: TextStyle(fontSize: 18.0),
               )),
         ],
       ),
     )
     )
     )
     );
}
}

我希望每个图像都导航到自己的页面，但我真的不知道如何:((我尝试在某些平台上搜索，但我读到的是他们使用图标而不是图像。我真的不知道如何导航这些图像到他们自己的页面。

我希望每个图像都导航到自己的页面，但我真的不知道如何:((我尝试在某些平台上搜索，但我读到的是他们使用图标而不是图像。我真的不知道如何导航这些图像到他们自己的页面。

我希望每个图像都导航到自己的页面，但我真的不知道如何:((我尝试在某些平台上搜索，但我读到的是他们使用图标而不是图像。我真的不知道如何导航这些图像到他们自己的页面。

我希望每个图像都导航到自己的页面，但我真的不知道如何:((我尝试在某些平台上搜索，但我读到的是他们使用图标而不是图像。我真的不知道如何导航这些图像到他们自己的页面。

Answer 1

您可以用GestureDetector小部件包装每张卡片并在点击时导航它

return GestureDetector(
        onTap: () => Navigator.of(context).push(), //your navigator code here
        child: Card(), //your card widget here
      )