Flutter如何在横向ListView每个图片容器下方添加文本

要在横向ListView的每个图片子项下方添加对应文本，只需要将单个列表项的布局从单图片组件改为垂直排列的Column结构，绑定和图片索引一一对应的文本数据即可，具体实现要点：

• 新增和图片列表顺序一一对应的标题文本列表
• 将原列表项中仅承载图片的Container子组件替换为Column，按垂直顺序依次放置图片、文本组件
• 调整图片固定高度、组件间距，避免布局溢出
• 可按需设置文本样式、图片圆角优化展示效果

修改后的完整代码如下：

// 原有图片资源列表
final List<String> containerImages = [
    'asset/images/canada3.jpg',
    'asset/images/canada1.jpg',
    'asset/images/canada2.jpg',
    'asset/images/canada2.jpg',
];
// 新增和图片顺序一一对应的文本列表，可根据实际需求修改内容
final List<String> itemTitles = [
  '加拿大风光3',
  '加拿大风光1',
  '加拿大风光2',
  '加拿大风光2'
];

Padding(
  padding: const EdgeInsets.all(8.0),
  // 适当拉高容器高度，为下方文本预留展示空间
  child: Container(
    height: 170,
    child: ListView.separated(
      separatorBuilder: (context, index) {
        return const SizedBox(width: 20,);
      },
      scrollDirection: Axis.horizontal,
      itemCount: 4,
      itemBuilder: (context, index) {
        // 替换原单图片布局为垂直列布局
        return SizedBox(
          width: 120,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 图片区域，设置固定高度避免布局溢出
              ClipRRect(
                borderRadius: BorderRadius.circular(8), // 可选：给图片添加圆角，不需要可删除这层组件
                child: Image.asset(
                  containerImages[index],
                  fit: BoxFit.cover,
                  height: 130,
                  width: 120,
                ),
              ),
              const SizedBox(height: 8), // 图片和文本的间距
              // 下方对应文本
              Text(
                itemTitles[index],
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.w500
                ),
              )
            ],
          ),
        );
      },
    ),
  ),
)

你可以根据自己的设计稿需求，直接修改外层容器高度、图片高度、间距数值、文本样式来匹配最终效果。

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