Question

我是一名学习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}'),
      ),
    );
  }
}

我尝试过但在执行上述代码期间遇到以下异常，

I / flutter（7767）：S调度程序库引起的异常提示 ╞═════════════════════════════════════════════════ ════════ I / flutter（7767）：在调度程序回调期间引发了以下断言： I / flutter（7767）：子树中有多个共享相同标签的英雄。 I / flutter（7767）：在每个要动画英雄的子树（通常是PageRoute子树）中，每个Hero I / flutter（7767）：必须具有唯一的非null标签。 I / flutter（7767）：在这种情况下，多个英雄具有以下标签：产品5 I / flutter（7767）：这是其中一个令人反感的英雄的子树： I / flutter（7767）：＃英雄（标签：产品5，状态：_HeroState＃c56bf） I / flutter（7767）：＃└KeyedSubtree-[GlobalKey＃ef976] I / flutter（7767）：＃└材料（类型：画布，状态：_MaterialState＃d2e02） I / flutter（7767）：＃└AnimatedPhysicalModel（持续时间：200ms，形状：矩形，borderRadius：BorderRadius.zero，高程：0.0，颜色：Color（0xfffafafa），动画颜色：false，shadowColor： Color（0xff000000），animateShadowColor：true，状态： _AnimatedPhysicalModelState＃8cf00（ticker无效））

如何解决此问题，请帮助我。

Answer 1

为了解决状态错误，您需要将唯一标签分配给hero小部件。

我建议使用index值代替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}'),
      ),
    );
  }
}

单击Gridview项时将数据传递到另一个屏幕

1 个答案: