我想每次添加不同的图像,我重复使用这张卡片。如何在不复制粘贴整个代码的情况下做到这一点

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)
              ],
            ),
          )
        ],
      ),
    );
  



【讨论】:

以上是关于我想每次添加不同的图像,我重复使用这张卡片。如何在不复制粘贴整个代码的情况下做到这一点的主要内容,如果未能解决你的问题,请参考以下文章

在 Framelayout 内,我有 1 个卡片视图和一个图像视图。我想要卡片视图上的图像视图。我想做的事

如何在卡片中添加渐变色?

如何刷新通过 addSubview 添加的图像?

如何在卡片背景中设置多种不同的颜色

使用两个不同的构造函数创建一个对象[重复]

所有按钮都应该在每张卡片的底部[重复]