我想每次添加不同的图像,我重复使用这张卡片。如何在不复制粘贴整个代码的情况下做到这一点
Posted
技术标签:
【中文标题】我想每次添加不同的图像,我重复使用这张卡片。如何在不复制粘贴整个代码的情况下做到这一点【英文标题】:I want to add different images each time, I reuses this Card.How to do that without copy pasting the whole Code 【发布时间】:2021-12-19 08:56:11 【问题描述】:class OwnCard extends StatelessWidget
const OwnCard(
Key? key,
) : super(key: key);
@override
Widget build(BuildContext context)
return Card(
child: Column(
children: [
AspectRatio(
aspectRatio: 18 / 11,
child: Image.asset('assets/diamond.png'),
),
Padding(
padding: EdgeInsets.fromLTRB(16, 12, 16, 8),
child: Column(
children: [
Text('Title'),
SizedBox(
height: 12,
),
Text('Secondary Text')
],
),
)
],
),
);
【问题讨论】:
【参考方案1】:将图像 url 传递给 OwnCard 类并显示它:
List<String> urls = ['', '', ''];
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0,
),
itemCount: 12,
itemBuilder: (context, index)
return OwnCard(urls: urls);
,
);
class OwnCard extends StatelessWidget
final List<String> urls;
const OwnCard(
Key? key,
required this.urls,
) : super(key: key);
@override
Widget build(BuildContext context)
return Card(
child: Column(
children: [
AspectRatio(
aspectRatio: 18 / 11,
child: Image.network(urls[0]),
),
Padding(
padding: EdgeInsets.fromLTRB(16, 12, 16, 8),
child: Column(
children: [
Text('Title'),
SizedBox(
height: 12,
),
Text('Secondary Text'),
Image.network(urls[1]),
Image.network(urls[2]),
],
),
)
],
),
);
【讨论】:
OwnCard(url:'https://....');
不,我想在 GridView 中重复使用这张卡片,并在每张卡片中添加不同的图像。我该怎么做。我能正确解释吗?
您可以在gridview中重复使用自己的卡片
但是我想每次都添加不同的图片,
已更新,多张图片【参考方案2】:
我更喜欢这种方式
class OwnCard extends StatelessWidget
final String imagePath;
final String title;
final String secondaryText;
const OwnCard(
Key? key,
required this.imagePath,
required this.title,
required this.secondaryText)
: super(key: key);
@override
Widget build(BuildContext context)
return Card(
child: Column(
children: [
AspectRatio(
aspectRatio: 18 / 11,
child: Image.asset(imagePath),
),
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 8),
child: Column(
children: [
Text(title),
const SizedBox(
height: 12,
),
Text(secondaryText)
],
),
)
],
),
);
【讨论】:
以上是关于我想每次添加不同的图像,我重复使用这张卡片。如何在不复制粘贴整个代码的情况下做到这一点的主要内容,如果未能解决你的问题,请参考以下文章