如何在GridView项的图片下方添加音乐标题与艺术家名称

效果对比 #

• 期望效果：音乐封面图片下方独立显示歌曲标题和艺术家名称，文本不叠加在图片上
• 现有效果：歌曲标题和艺术家名称叠加在音乐封面图片的底部区域

修改步骤（针对card_item_widget.dart） #

把原来的叠加布局（Stack）改为垂直排列的Column布局，让图片和文本上下分布：

return Card(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      // 音乐封面图片
      ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Image.network(
          item.imageUrl,
          fit: BoxFit.cover,
          width: double.infinity,
          height: 120, // 可根据需求固定图片高度
        ),
      ),
      // 图片下方的文本区域
      Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              item.title,
              style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 14,
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
            SizedBox(height: 2),
            Text(
              item.artist,
              style: TextStyle(
                color: Colors.grey[600],
                fontSize: 12,
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    ],
  ),
);

修改说明 #

1. 用Column替代原有的Stack布局，实现图片与文本的垂直排列
2. 给图片设置固定高度（或用Expanded适配GridView的网格大小），保证布局一致性
3. 文本区域添加内边距，让内容与图片保持合适间距
4. 给文本设置maxLines和overflow属性，避免过长内容破坏布局

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