颤动墨水井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调用您的数据