dart - 单击 Gridview 项时将数据传递到另一个屏幕
问题描述
我是一名学习 Flutter 的 Java 开发人员。单击 Gridview 的项目时,我需要将数据传递到另一个屏幕。我尝试了几个在线帮助,但找不到更好的解决方案,
我的课是,
class Product extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ProductState();
}
}
var productList = [
{
"name": "Product 1",
"image": "assets/products/product1.jpg",
"price": 6.99,
"description": "30% off",
},
.
.
.
.
];
class _ProductState extends State<Product> {
@override
Widget build(BuildContext context) {
return GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: productList.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (BuildContext context, int index) {
return FeatureProduct(
productName: productList[index]['name'],
productImage: productList[index]['image'],
productPrice: productList[index]['price'],
productDescription: productList[index]['description'],
);
},
);
}
}
class FeatureProduct extends StatelessWidget {
final String productImage;
final String productName;
final String productDescription;
final double productPrice;
FeatureProduct(
{this.productImage,
this.productName,
this.productPrice,
this.productDescription});
@override
Widget build(BuildContext context) {
return Card(
child: Hero(
tag: productName,
child: Material(
child: InkWell(
onTap: () {
// print(productName);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new ProductDetail(
product: FeatureProduct(
productName: productName,
productImage: productImage,
productDescription: productDescription,
productPrice: productPrice,
),
),
),
);
},
child: GridTile(
footer: Container(
color: Colors.white70,
child: ListTile(
leading: Text(
productName,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
title: Text(
"RM $productPrice",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w700,
),
),
subtitle: Text(
productDescription,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
),
),
child: Padding(
padding: EdgeInsets.all(15.0),
child: Image.asset(
productImage,
fit: BoxFit.cover,
),
)),
),
),
),
);
}
}
class ProductDetail extends StatelessWidget {
final FeatureProduct product;
ProductDetail({this.product});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("${product.productName}"),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Text('${product.productDescription}'),
),
);
}
}
我尝试但在执行上述代码期间出现以下异常,
我/颤振(7767):══╡调度程序库发现异常╞══════════════════════╕══␐════════════ ═══════════════════════ I/flutter(7767):在调度程序回调期间抛出以下断言:I/flutter(7767):有多个在子树中共享相同标签的英雄。I/flutter (7767):在每个要为其动画英雄的子树(通常是 PageRoute 子树)中,每个 Hero I/flutter(7767):必须有一个唯一的非空标签。I/flutter (7767):在这种情况下,多个英雄具有以下标签:产品 5 I/flutter (7767):这是其中一个违规英雄的子树:I/flutter (7767):# Hero(tag:产品 5,状态:_HeroState#c56bf) I/flutter (7767): # └KeyedSubtree-[GlobalKey#ef976] I/flutter (7767): # └Material(type: canvas, state:
我该如何解决这个问题,请帮助我。
解决方案
为了修复陈述的错误,您需要将唯一标签分配给hero
小部件。
我建议使用index
Value 而不是productName
.
更新后的代码如下所示:
import 'package:flutter/material.dart';
class Product extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ProductState();
}
}
var productList = [
{
"name": "Product 1",
"image": "assets/products/product1.jpg",
"price": 6.99,
"description": "30% off",
},
{
"name": "Product 2",
"image": "assets/products/product1.jpg",
"price": 6.99,
"description": "30% off",
},
{
"name": "Product 3",
"image": "assets/products/product1.jpg",
"price": 6.99,
"description": "30% off",
},
{
"name": "Product 4",
"image": "assets/products/product1.jpg",
"price": 6.99,
"description": "30% off",
},
];
class _ProductState extends State<Product> {
@override
Widget build(BuildContext context) {
return GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: productList.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (BuildContext context, int index) {
return FeatureProduct(
productName: productList[index]['name'],
productImage: productList[index]['image'],
productPrice: productList[index]['price'],
productDescription: productList[index]['description'],
index: index,
);
},
);
}
}
class FeatureProduct extends StatelessWidget {
final String productImage;
final String productName;
final String productDescription;
final double productPrice;
final int index;
FeatureProduct(
{this.productImage,
this.productName,
this.productPrice,
this.index,
this.productDescription});
@override
Widget build(BuildContext context) {
return Card(
child: Hero(
tag: index,
child: Material(
child: InkWell(
onTap: () {
// print(productName);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new ProductDetail(
product: FeatureProduct(
productName: productName,
productImage: productImage,
productDescription: productDescription,
productPrice: productPrice,
),
),
),
);
},
child: GridTile(
footer: Container(
color: Colors.white70,
child: ListTile(
leading: Text(
productName,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
title: Text(
"RM $productPrice",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.w700,
),
),
subtitle: Text(
productDescription,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
),
),
child: Padding(
padding: EdgeInsets.all(15.0),
child: Image.asset(
productImage,
fit: BoxFit.cover,
),
)),
),
),
),
);
}
}
class ProductDetail extends StatelessWidget {
final FeatureProduct product;
ProductDetail({this.product});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("${product.productName}"),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Text('${product.productDescription}'),
),
);
}
}
推荐阅读
- html - 我如何对单独的单独应用按钮列表(在检查一个按钮时)效果?
- php - 我不知道我的代码做错了什么,php 表单验证的错误消息停止工作
- android - 带有 VueJs 的 Ionic 视频播放器
- kubernetes - 如何解决此问题 ErrImageNeverPull pod 创建状态 kubernetes
- python - 为什么 Python 可以识别某些在 body 函数之外的变量(例如列表)而不识别其他变量?
- c++ - C++ 你如何解决标题中的命名空间变得未定义?
- javascript - 如何从 arrayToDataTable 修改从 json 编码获取数据的 googlechart DataView 注释?
- c# - 为什么我的列表列表没有显示在 Unity 检查器中?
- python - 在Python中对列表的每n个列表进行分组
- sql - PostgreSQL LIKE 查询