Flutter中如何编辑同一Widget的多个实例并添加独立图片？

1. 修改ReusableCard，支持自定义图片参数 #

通过给ReusableCard添加可选的图片路径参数，让每个卡片实例能独立配置内容，避免同步变更。修改后的代码如下：

class ReusableCard extends StatefulWidget {
  // 添加可选的图片路径参数，默认值为null
  ReusableCard({required this.color, this.imagePath});

  final Color color;
  final String? imagePath; // 图片路径，可为空

  @override
  State<ReusableCard> createState() => _ReusableCardState();
}

class _ReusableCardState extends State<ReusableCard> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        print('You have clicked me');
      },
      child: Container(
        margin: EdgeInsets.all(25),
        decoration: BoxDecoration(
          color: widget.color,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              blurRadius: 25,
              color: Color(0xd6d6d6d6).withOpacity(0.6),
            ),
          ],
          // 有图片路径时添加背景图
          image: widget.imagePath != null
              ? DecorationImage(
                  image: AssetImage(widget.imagePath!),
                  fit: BoxFit.cover, // 根据容器调整图片显示方式
                  // 可选：添加遮罩提升文字可读性（如果后续要加文字）
                  colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.3),
                    BlendMode.darken,
                  ),
                )
              : null,
        ),
        // 如需在图片上叠加内容，可在此添加child（比如Text）
        // child: widget.imagePath != null ? Text("卡片标题") : null,
      ),
    );
  }
}

2. 在InputPage中为每个ReusableCard传入独立图片路径 #

现在每个卡片实例可以单独指定图片路径，实现差异化显示：

class _InputPageState extends State<InputPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Row(
          children: <Widget>[
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.fromLTRB(20 , 20 , 20 , 10),
                    child: CircleAvatar(
                      radius: 35,
                      backgroundImage: AssetImage('images/avatarslika.jpg'),
                    ),
                  ),
                  Expanded(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: ReusableCard(color: Colors.white, imagePath: 'images/card1.jpg'),
                        ),
                        Expanded(
                          child: ReusableCard(color: Colors.white, imagePath: 'images/card2.jpg'),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: ReusableCard(color: Colors.white, imagePath: 'images/card3.jpg'),
                        ),
                        Expanded(
                          child: ReusableCard(color: Colors.white, imagePath: 'images/card4.jpg'),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: ReusableCard(color: Colors.white, imagePath: 'images/card5.jpg'),
                        ),
                        Expanded(
                          child: ReusableCard(color: Colors.white, imagePath: 'images/card6.jpg'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 新增的imagePath是可选参数，不传时卡片会保持原有样式，兼容之前的使用逻辑。
• 可以通过调整DecorationImage的fit属性（如BoxFit.contain、BoxFit.fill）控制图片显示效果，按需添加colorFilter优化视觉体验。
• 每个卡片实例的参数独立，修改任意一个的图片路径不会影响其他卡片。

内容的提问来源于stack exchange，提问作者Kipac