提问人:Parth Koladiya 提问时间:12/11/2021 最后编辑:cigienParth Koladiya 更新时间:12/17/2021 访问量:1304
flutter : 无法读取 null 的属性(读取颜色)
flutter : can not read properties of null (reading color)
问:
我正在运行此代码,但出现错误 无法读取 null 的属性(读取颜色)
在代码中加星标的行中
import 'package:flutter/material.dart';
import 'package:untitled/constants.dart';
import 'package:untitled/models/product.dart';
import 'package:untitled/screens/home/components/categories.dart';
class Body extends StatelessWidget {
const Body({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15.0),
child: Text(
"Women",
textAlign: TextAlign.left,
style: Theme.of(context)
.textTheme
.headline5
.copyWith(fontWeight: FontWeight.bold),
),
),
Categories(),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: GridView.builder(
itemCount: products.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.75,
),
itemBuilder: (Context, index) => ItemCard(),
),
),
),
],
);
}
}
class ItemCard extends StatelessWidget {
final Product product;
final Function press;
const ItemCard({
Key key,
this.product,
this.press,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: press,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
height: 100,
width: 100,
decoration: BoxDecoration(
* color: product.color, //error in that line
borderRadius: BorderRadius.circular(15),
),
child: Hero(
tag: "${product.id}",
child: Image.asset(product.image),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 5),
child: Text(
product.title,
style: TextStyle(
color: ktextlightcolor,
),
),
),
Text(
"\$${product.price}",
style: TextStyle(fontWeight: FontWeight.bold),
)
],
),
);
}
}
这是product.dart
import 'package:flutter/material.dart';
class Product {
final String image, title, description;
final int price, size, id;
var color;
Product({
this.id,
this.image,
this.title,
this.price,
this.description,
this.size,
this.color,
});
}
List<Product> products = [
Product(
id: 1,
title: "office code",
price: 232,
size: 12,
description: dummyText,
image: "assets/images/bag_1.png",
color: const Color(0XFF3D82AE),
),
Product(
id: 2,
title: "belt bag",
price: 234,
size: 8,
description: dummyText,
image: "assets/images/bag_2.png",
color: const Color(0xffd3a084)),
Product(
id: 3,
title: "hang top",
price: 444,
size: 13,
description: dummyText.
image: "assets/images/bag_3.png",
color: const Color(0XFF989493)),
Product(
id: 4,
title: "old fashion",
price: 555,
size: 18,
description: dummyText,
image: "assets/images/bag_4.png",
color: const Color(0xffe6b398)),
Product(
id: 5,
title: "office code",
price: 999,
size: 33,
description: dummyText,
image: "assets/images/bag_5.png",
color: const Color(0xfffb7883)),
Product(
id: 6,
title: "siple bag",
price: 1299,
size: 6,
description: dummyText,
image: "assets/images/bag_6.png",
color: const Color(0xffaeaeae)),
];
String dummyText =
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
答:
1赞
Dan Artillaga
12/11/2021
#1
您需要将产品实例传递给构造函数。它当前被设置为可选参数,因为它用 包装。ItemCard
{}
因此,假设您想从列表中传递产品,它应该是这样的:products
Expanded(
child: Padding(
...,
child: GridView.builder(
itemCount: products.length,
...,
itemBuilder: (Context, index) => ItemCard(product: products[index]),
),
),
),
0赞
Mimu Saha Tishan
12/17/2021
#2
您必须在 ItemCard() 类上传递参数,其中您已经提到了 2 个参数。您没有传递任何参数。更新您的代码,如下所示:
itemBuilder: (Context, index) => ItemCard(product: products[index], press: press)
评论