Flutter实现卡片上方叠加图片效果（非图片间堆叠）求助

要实现卡片上方叠加图片且不互相堆叠的效果，你需要调整以下几个核心点，同时修改代码中的关键配置：

1. 恢复并优化图片的定位布局
2. 增大垂直间距避免图片重叠
3. 允许内容超出容器边界

修改后的完整代码如下：

return Expanded(
  child: Wrap(
    spacing: 20.0,
    runSpacing: 60.0, // 增大垂直间距，给上方图片留出空间避免重叠
    children: food.map((foodItem) {
      return GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DetailPage(),
            ),
          );
        },
        child: Stack(
          alignment: Alignment.topCenter,
          clipBehavior: Clip.none, // 允许图片超出Stack边界显示
          children: [
            Positioned(
              top: -45, // 向上偏移，让图片一半在卡片外一半在卡片内
              child: Image.asset(
                foodItem.image,
                height: 90.0,
                width: 120.0, // 限制图片宽度，避免超出卡片范围
                fit: BoxFit.cover,
              ),
            ),
            Container(
              width: 180.0,
              height: 120.0,
              margin: const EdgeInsets.only(top: 40.0), // 给图片预留顶部空间，防止遮挡卡片内容
              decoration: BoxDecoration(
                color: foodItem.bgColor,
                borderRadius: BorderRadius.circular(20.0),
              ),
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    FittedBox(
                      fit: BoxFit.scaleDown,
                      child: Text(
                        foodItem.name,
                        maxLines: 2,
                        style: const TextStyle(
                          fontSize: 15.0,
                          color: Colors.black,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                    const SizedBox(height: 5.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "\$${foodItem.price.toStringAsFixed(2)}",
                          style: const TextStyle(
                            fontSize: 16.0,
                            color: Colors.black,
                            fontWeight: FontWeight.w900,
                          ),
                        ),
                        InkWell(
                          onTap: () {
                            // 在此添加收藏逻辑
                          },
                          child: Container(
                            width: 40,
                            height: 40,
                            decoration: const BoxDecoration(
                              color: Colors.white,
                              shape: BoxShape.circle,
                            ),
                            child: const Icon(
                              Icons.favorite,
                              color: Colors.black,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    }).toList(),
  ),
);

核心修改说明：

• clipBehavior: Clip.none：必须设置这个属性，否则图片超出Stack的部分会被裁剪，无法显示在卡片上方
• runSpacing: 60.0：放大垂直方向的卡片间距，确保上下两行的图片不会互相重叠
• Container的margin：给卡片顶部添加间距，避免卡片内的文字被上方图片遮挡
• Positioned的top值：设置为图片高度的一半负值，让图片刚好一半悬在卡片外，匹配示例图的视觉效果

内容的提问来源于stack exchange，提问作者Alyaa Rana Raya