我想将所选数据从当前页面传递到下一页。我是新手，我已经尝试了每种解决方案，但似乎都无法正常工作。我有一组数据，我想将卡中选定的数据详细信息传递到下一页。
import 'package:flutter/material.dart';
import 'package:flutter_new/components/phone_productDetail.dart';
import 'package:flutter_new/model/products.dart';
import 'package:flutter_new/model/products_repository.dart';
class AllPhones extends StatefulWidget {
AllPhones({
Key key,
}) : super(key: key);
@override
_AllPhonesState createState() => _AllPhonesState();
}
class _AllPhonesState extends State<AllPhones> {
List<Card> _buildGridCards(BuildContext context) {
List<Product> products = ProductsRepository.loadProducts(Category.phones);
if (products == null || products.isEmpty) {
return const <Card>[];
}
return products.map((product) {
return Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Column(
children: <Widget>[
Image.network(
product.image,
fit: BoxFit.cover,
height: 190,
),
Container(
height: 110,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Text(
product.name,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.brown,
),
),
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 0, 0),
child: Container(
child: Text(
'\$${product.price}',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.brown[300],
fontSize: 20),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
child: Container(
child: Text(
'\$${product.priceOld}',
style: TextStyle(
color: Colors.brown,
decoration: TextDecoration.lineThrough),
)),
)
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Container(
child: Text(
"2554 Sales",
style: TextStyle(
color: Colors.brown,
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
child: Container(
child: Row(
children: <Widget>[
Icon(
Icons.star,
color: Colors.blue,
size: 15,
),
Text(
'3',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.brown,
),
)
],
)),
)
],
)
]),
)
],
),
);
}).toList();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Phones and Tablets'),
),
body: InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => PhoneProductDetail(
)));
},
child: GridView.count(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
crossAxisCount: 2,
padding: EdgeInsets.all(16.0),
childAspectRatio: 50 / 100,
children: _buildGridCards(context)),
),
);
}
}
我想将数据传递到我的PhoneProductDetailPage。
下面是我的模型和存储库
import 'package:flutter/foundation.dart';
enum Category {
all,
phones,
tablets,
home,
kitchen,
sports,
electronics,
fashion,
computers,
beauty,
baby
}
class Product {
const Product({
@required this.category,
@required this.id,
@required this.name,
@required this.price,
@required this.priceOld,
@required this.image,
@required this.image2,
@required this.image3,
@required this.prodDetail,
}) : assert(category != null),
assert(id != null),
assert(name != null),
assert(image != null),
assert(price != null);
final Category category;
final int id;
final String image;
final String name;
final int price;
final int priceOld;
final String image2;
final String image3;
final String prodDetail;
@override
String toString() => "$name (id=$id)";
}
i
import 'products.dart';
class ProductsRepository {
static List<Product> loadProducts(Category category){
const allProducts = <Product>[
Product(
id:1,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:2,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:3,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:4,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:5,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:6,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:7,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:8,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:9,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
Product(
id:10,
category: Category.phones,
name: "Italian suit with a fitted trouser",
image:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image2:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
image3:
'http://static.burton.co.uk/v1/static/json-0000156704_UK-HP-2019_14_10_19_WK7__03jpg',
price: 120,
priceOld: 85,
prodDetail:
"Angular taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. Angular applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are"),
];
if (category == Category.all) {
return allProducts;
} else {
return allProducts.where((Product p) {
return p.category == category;
}).toList();
}
}
}
预先感谢
答案 0 :(得分：0)
您可以将数据作为参数传递。为此，您可能需要在PhoneProductDetailPage类的构造函数中声明它。
让我们尝试将一个字符串传递给下面的类，以便您清楚地了解它。我正在将命名参数 text ='data'传递给该类。
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => PhoneProductDetail(text = 'data'),
));
},
，您的PhoneProductDetailPage类的定义将实现为
class PhoneProductDetail extends StatelessWidget {
final String text;
PhoneProductDetail({Key key, @required this.text}) : super(key: key);
答案 1 :(得分：0)
您可以像这样通过构造函数参数
Navigator.push(context, MaterialPageRoute(builder: (context) => PhoneProductDetail(youCanPassAnyObjecHere)));
或者您可以通过这种方式使用导航器参数
Navigator.pushNamed(
context,
'routeName',
arguments: {
argumentKey1: data1,
argumentKey2: data2,
},
);
然后要使用它，您必须在构建方法中从路线中提取数据
final Map arguments = ModalRoute.of(context).settings.arguments;
if (arguments != null) {
data1 = arguments[argumentKey1];
data2 = arguments[argumentKey2];
}
要使用第二个选项，您必须使用名称路由。