所以我有這個名為 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."},
];
我想添加墨水瓶，所以每次用戶單擊名稱串列時，它都會轉到另一個頁面，其中包含有關它的影像和文本
uj5u.com熱心網友回復：
該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"]),),
);
},
);
uj5u.com熱心網友回復：
在 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 呼叫您的資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/362670.html