flutter - 无效参数:在 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,
});
} ```
解决方案
问题出在你的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});
}
结果
推荐阅读
- algorithm - 查找最小幸存者数量的函数
- karate - 尝试从空手道的 API 响应中获取值时出错
- node.js - NestJS + Kafka + Azure Function 的微服务架构
- python - 验证性因子分析未能收敛
- api - Laravel Passport 客户端凭证使用 Nuxt 授予令牌
- python - 为什么我需要写两次“datetime”?
- python - 当邮件有空格时,我的垃圾邮件命令不起作用
- go - 你如何通过 PacketConn.WriteTo 发送数据包?
- python - 如何在 python 中打印带有转换值的熊猫表?
- r - 使用带有 ShinyApps.io 的私有 GitHub 包