Flutter布局求助：标题不覆盖缩略图且文本两行截断失效

问题描述 #

需求：实现类似YouTube的视频列表布局，要求文本标题不与缩略图容器重叠；同时标题文本垂直适配，最多显示2行，超出部分用省略号代替，但设置maxLines后未生效。

当前问题：标题文本与缩略图出现重叠，且maxLines属性未起作用，无法限制行数并显示省略号。
期望效果：缩略图在上，标题在下方（带合理间距），标题最多显示2行，超出内容自动截断并显示省略号。

相关代码 #

Container(
  margin: const EdgeInsets.symmetric(vertical: 20.0),
  height: 150.0,
  child: ListView(
    // This next line does the trick.
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            child: Column(children: [
              Row(
                children: [
                  Stack(
                    children: [
                      ClipRRect(
                        borderRadius:
                            BorderRadius.circular(8.0),
                        child: Image.network(
                          videos[1].thumbnailUrl,
                          height: 80,
                          width: 150,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ],
                  ),
                ],
              )
            ]),
          ),
          Flexible(
              child: Text(
            videos[1].title,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          )),
        ],
      ),

修复方案及代码 #

核心问题分析 #

1. 缩略图外层嵌套了冗余的Column和Row，导致布局约束混乱；
2. 水平滚动的ListView中，Flexible无法给Text提供明确的宽度限制，使得maxLines失效；
3. 缩略图与标题之间无间距，容易出现视觉重叠。

修复后的代码 #

Container(
  margin: const EdgeInsets.symmetric(vertical: 20.0),
  height: 150.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 移除冗余嵌套，直接保留缩略图组件
          ClipRRect(
            borderRadius: BorderRadius.circular(8.0),
            child: Image.network(
              videos[1].thumbnailUrl,
              height: 80,
              width: 150,
              fit: BoxFit.fill,
            ),
          ),
          // 添加间距避免标题与缩略图重叠
          const SizedBox(height: 8),
          // 用固定宽度容器包裹Text，提供明确约束使maxLines生效
          SizedBox(
            width: 150,
            child: Text(
              videos[1].title,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(fontSize: 14),
            ),
          ),
        ],
      ),
      // 可添加其他视频列表项
    ],
  ),
)

关键修复点 #

• 移除缩略图外层多余的Column、Row和Container，简化布局结构；
• 给标题文本设置与缩略图一致的固定宽度，确保文本在限定宽度内换行并触发省略号；
• 添加SizedBox作为缩略图与标题的间距，彻底解决视觉重叠问题；
• 设置crossAxisAlignment: CrossAxisAlignment.start让标题左对齐，更贴近YouTube的布局风格。

内容的提问来源于stack exchange，提问作者Rupal Franz Adrian