我的产品不会显示在屏幕上图标显示，标题也显示，但不显示产品的图像和描述或标题

如何解决我的产品不会显示在屏幕上图标显示，标题也显示，但不显示产品的图像和描述或标题

我正在学习有关 Flutter 的 Udemy 教程，试图建立一个电子商务商店。 似乎一切正常，但我无法让我的产品显示在屏幕上。 添加到购物车图标和收藏夹图标显示了它们的位置，但不显示实际产品的图片、标题或描述。

import 'package:Flutter/material.dart';
import '../models/product.dart';
import '../widgets/product_item.dart';

class ProductsOverviewScreen extends StatelessWidget {
  final List<Product> loadedProducts = [
    Product(
      id: 'p1',title: 'Red Shirt',description: 'A red shirt - it is pretty red!',price: 29.99,imageUrl:
          'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',),Product(
      id: 'p2',title: 'Trousers',description: 'A nice pair of trousers.',price: 59.99,imageUrl:
          'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Trousers%2C_dress_%28AM_1960.022-8%29.jpg/512px-Trousers%2C_dress_%28AM_1960.022-8%29.jpg',Product(
      id: 'p3',title: 'Yellow Scarf',description: 'Warm and cozy - exactly what you need for the winter.',price: 19.99,imageUrl:
          'https://live.staticflickr.com/4043/4438260868_cc79b3369d_z.jpg',Product(
      id: 'p4',title: 'Balmain Paris T - Shirt ',description: '100% Cotton',price: 49.99,imageUrl:
          'https://cdn-images.farfetch-contents.com/16/62/99/24/16629924_32606183_1000.jpg',];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Splash'),body: GridView.builder(
        padding: const EdgeInsets.all(10.0),itemCount: loadedProducts.length,itemBuilder: (ctx,i) => ProductItem(
          loadedProducts[i].id,loadedProducts[i].title,loadedProducts[i].imageUrl,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,childAspectRatio: 3 / 2,crossAxisspacing: 10,mainAxisspacing: 10,);
  }
}

products_overview_screen.dart 我在其中添加每个产品的详细信息

import 'package:Flutter/material.dart';

class ProductItem extends StatelessWidget {
  final String id;
  final String title;
  final String imageUrl;

  ProductItem(this.id,this.imageUrl,this.title);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),child: GridTile(
        child: Image.network(
          imageUrl,fit: BoxFit.cover,footer: GridTileBar(
          backgroundColor: Colors.black87,leading: IconButton(
            icon: Icon(Icons.favorite),color: Theme.of(context).accentColor,onpressed: () {},title: Text(
            title,textAlign: TextAlign.center,trailing: IconButton(
            icon: Icon(Icons.shopping_cart),);
  }
}

product_item.dart 用于设置网格布局、图标等

 import 'package:Flutter/foundation.dart';

  class Product {
      final String id;
      final String title;
      final String description;
      final double price;
      final String imageUrl;
      bool isFavourite;
    
      Product({
        @required this.id,@required this.description,@required this.imageUrl,this.isFavourite = false,@required this.price,@required this.title,});
    }

product.dart 在其中创建变量

主文件夹中的一切都很好，因为我在屏幕上看到了正确的页面

product.dart file

products_overview_screen.dart file

product_item.dart file

解决方法

由于您没有使用映射方法来定义没有 ProductItem(this.id,this.imageUrl,this.title); 的构造函数又名 {}， 你很容易把构造函数的字段放错位置。

问题出在ProductItem(this.id,this.title);， 和

ProductItem(
          loadedProducts[i].id,loadedProducts[i].title,loadedProducts[i].imageUrl,),

this.imageUrl 接受 loadedProducts[i].title 的值，而 this.title 接受 loadedProducts[i].imageUrl 的值，因为它们在构造函数中放错了位置。

将 ProductItem 构造函数更改为 ->

  ProductItem({
    this.id,this.title,});