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

Question

我正在关注关于 Flutter 的 Udemy 教程，试图建立一个 e-commerce 商店。一切似乎都很好，但我无法让我的产品显示在屏幕上。添加到购物车图标和收藏夹图标显示了它们应在的位置，但未显示实际产品的图片、标题或描述。

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),
            onPressed: () {},
            color: Theme.of(context).accentColor,
          ),
        ),
      ),
    );
  }
}

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

Answer 1

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

问题出在ProductItem(this.id, this.imageUrl, 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,
    this.imageUrl,
  });

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

My products won't show on the screen. The icons show and so does the title but not the images and descriptions or titles of the products

flutter

dart

shop