扑动墨水瓶 onTap

Question

所以我有这个页面叫做 screen1 它工作正常并显示数据

import 'package:flutter/material.dart';
import 'package:food_app/data/data.dart';
import 'package:food_app/views/home.dart';

class Screen1 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("japanese recipes"),
        backgroundColor: Colors.yellow,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView.builder(
            itemCount: data.length,
            itemBuilder: (BuildContext context , int index) {
              return Card(
                  child: ListTile(
                    
                    leading: CircleAvatar(
                      backgroundColor: Colors.white,
                      child:  Image.asset(data[index]["image"])),
                    title: Text(data[index]["name"]),
                    subtitle:Text(data[index]["about"]),
                    ),
                  );
              
            }
          )
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.yellow,
        child: const Icon(Icons.home),
        onPressed:  () {
          Navigator.of(context)
          .push(MaterialPageRoute(builder: (context) => HomePage()));
        },
      ),
    );
  }
}

我的列表数据是这个，有名字和图片，关于

List data = [
  {"name": "Chicken-Zosui","image":"assets/recipeApi/Chicken-Zosui.jpg", "about": "Zosui is a comforting Japanese rice soup that works beautifully with pantry-ready ingredients like ready-cooked rice, eggs, and leftover ingredients. The easy template is flexible, yet you’re guaranteed a nourishing meal at the end of the day."},
  {"name": "Miso-Salmon","image":"assets/recipeApi/Miso-Salmon.jpg", "about": "Known for its Omega-3 fatty acid, salmon is a great protein to have in the diet. For that reason alone, I always have frozen salmon fillets in my freezer. This Miso Salmon recipe is really simple to make. You just need to marinate the fish for 30 minutes, you’d get a flavorful fish to serve for dinner. We love it with Japanese ginger rice."},
  {"name": "Spam-Onigirazu","image":"assets/recipeApi/Spam-Onigirazu.jpg", "about": "Eggs, ham, sushi rice, and nori sheet. That’s all you need to make this yummy Spam Onigirazu. I used a special mold to create a perfect shape for the rice sandwich, but you really don’t need one."},
  {"name": "Sweet-Onion","image":"assets/recipeApi/Sweet-Onion.jpg", "about": "This Japanese Mixed Rice is a one-pot wonder! You can literally cook it with any seasonal ingredients or pantry items you have in the refrigerator. Think dried mushrooms, canned tuna, sweet potatoes, carrots, etc."},
  {"name": "Vegan-Miso-Soup","image":"assets/recipeApi/Vegan-Miso-Soup.jpg", "about": " cannot live without miso soup. Luckily, you can make a really good bowl of miso soup with only pantry items like dried kombu, silken tofu, and dried wakame. You can even enjoy it plain! Packed with umami goodness, it’s hands-down the easiest soup anyone can pull off anytime."},
  {"name": "Yaki-Onigiri","image":"assets/recipeApi/Yaki-Onigiri.jpg", "about": "Lightly brushed with savory soy sauce, these grilled Japanese rice balls are simply irresistible. It requires only rice, salt, and sweet and soy sauce (or my take, delicious Unagi Sauce! It can be a store-bought or my homemade recipe on the blog). You can make them plain or stuffed them with fun fillings such as canned salmon. They are so easy to make that you want to grill them up at home!"},
  {"name": "Yaki-Udon","image":"assets/recipeApi/Yaki-Udon.jpg", "about": "Japanese udon noodles stir-fried with vegetables and your choice of protein, Yaki Udon is definitely a keeper when comes to easy pantry meal."},

];

我想添加墨水池，所以每次用户点击名称列表时，它都会转到另一个页面，其中包含有关它的图像和文字

Answer 1

ListTile 小部件本身有一个onTap 事件，不需要InkWell

return Card(
       child: ListTile(
             leading: CircleAvatar(
                backgroundColor: Colors.white,
                child:  Image.asset(data[index]["image"])),
              title: Text(data[index]["name"]),
              subtitle:Text(data[index]["about"]),
              ),
             onTap: () {
               Navigator.push(
                context,
                 MaterialPageRoute(builder: (context) => YourNewPage(name:data[index]["name"],image:data[index]["image"]),),
               );
             },
         );

Answer 2

在 listTile 中使用 oneTap 进入您的详细信息页面并使用构造器来传递您的数据。

    import 'package:flutter/material.dart';
    import 'package:food_app/data/data.dart';
    import 'package:food_app/views/home.dart';
    
    class Screen1 extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("japanese recipes"),
            backgroundColor: Colors.yellow,
          ),
          body: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView.builder(
                itemCount: data.length,
                itemBuilder: (BuildContext context , int index) {
                  return Card(
                      child: ListTile(
                        onTap:(){
Navigator.push(
                context,
                 MaterialPageRoute(builder: (context) => DetailsPage(name:data[index]["name"],image:data[index]["image"]),),
               );}

                        leading: CircleAvatar(
                          backgroundColor: Colors.white,
                          child:  Image.asset(data[index]["image"])),
                        title: Text(data[index]["name"]),
                        subtitle:Text(data[index]["about"]),
                        ),
                      );
                  
                }
              )
            ),
          ),
          floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.yellow,
            child: const Icon(Icons.home),
            onPressed:  () {
              Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => HomePage()));
            },
          ),
        );
      }
    }

详情页会是这样的

    import 'package:flutter/material.dart';
    
    
        class DetailsPage extends StatefulWidget {
        String name;
String image;
        
          @override
          _PatientListState createState() => _PatientListState();
        }
        
        class _PatientListState extends State<BloodDonateScreen> {
        
          @override
          Widget build(BuildContext context) {
         
              return Scaffold(
                  appBar: AppBar(
                    title: Text("Deatils Page"),
                    
                  ),
                  body: SingleChildScrollView(
                    child: Container(
                      height: 600,
                      child: ListView.builder(
                        itemCount: 10,
                        itemBuilder: (BuildContext context, index) {
                          return Container(
                            width: 300,
                            height: 260,
                            padding: new EdgeInsets.all(10.0),
                            child: Card(
        
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(15.0),
                              ),
                              color: Colors.red,
                              elevation: 10,
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                   ListTile(
                                    leading: Icon(Icons.bloodtype, size: 40),
                                    title: Text(
                                        widget.name,
                                        style: TextStyle(
                                            fontSize: 20.0,
                                            color: theme.changeColor? Colors.white: Colors.black)
                                    ),
                                    
                                  
        
                                    ],
                                  ),
        
                                ],
                              ),
                            ),
                          );
                        },
        
        
                      ),
                    ),
                  ),
                );
            }
            );
          }
        }

然后在详细信息页面中使用 widget.name / widget.image 调用您的数据