首页 > 解决方案 > 无效参数:在 URL 文件中未指定主机:///Trousers

问题描述

我是新来的颤振。来自 URL 的图像未显示在屏幕上。错误是指定 URL 中没有主机。而且我目前正在从教程中学习,但是讲师的代码运行良好,而我的代码却不行。请帮帮我,因为我是新手。

这是我的Main.dart文件:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyShop',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProductsOverviewScreen(),
    );
  }
}

products_overview_screen.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: 'A Pan',
      description: 'Prepare any meal you want.',
      price: 49.99, 
      imageUrl: 
          'https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Cast-Iron-Pan.jpg/1024px-Cast-Iron- Pan.jpg',
    ), 
  ];

  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text('My Shop'),
      ),
      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,
        ),
      ),
    );
  }
} 

这是Product_item.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 GridTile(
      child: Image.network(
        //imageUrl
        imageUrl,
        fit: BoxFit.cover,
      ),
    );
  }
} ```

product.dart

class Product {
  final String id;
  final String title;
  final String description;
  final double price;
  final String imageUrl;
  bool isFavorite;

  Product({
    @required this.id,
    @required this.description,
    @required this.imageUrl,
              this.isFavorite,
    @required this.price,
    @required this.title,
  });
} ```

标签: flutterdartflutter-layoutflutter-dependencies

解决方案


问题出在你的ProductItem课上。您没有按照数字定义的方式分配项目。

Like: ProcutItem(this.id, this.title, this.imageUrl),该项目也应该以相同的方式传递。没有任何变化

解决方案

class ProductItem extends StatelessWidget {
  final String id;
  final String title;
  final String imageUrl;
  ProductItem(this.id, this.title, this.imageUrl);  // <---- Here is the change
  @override
  Widget build(BuildContext context) {
    return GridTile(
      child: Image.network(
        //imageUrl
        imageUrl,
        fit: BoxFit.cover,
      ),
    );
  }
}

因为,你已经通过这种方式在你的ProductOverViewScreen

        // first should be id, then title, then imageURl. It should match from the above class
        ProductItem(
          loadedProducts[i].id,  
          loadedProducts[i].title,
          loadedProducts[i].imageUrl,
        )

假设

我的Product课看起来像这样,我相信你可能只是用这种方式上课。您的Product类在代码中不可用,因此是假设。如果需要,您可以参考此代码

class Product{
  double price;
  String id, title, description, imageUrl;
  
  Product({this.price, this.id, this.title, this.description, this.imageUrl});
}

结果

结果截图


推荐阅读