Flutter中SliverChildList内Text组件溢出问题：实现文本自动换行并适配列表项高度

我来帮你搞定这个问题！你遇到的核心原因是Row组件不会给子元素提供有限的宽度约束——当Text放在Row里时，如果没有明确的宽度限制，它会一直横向延伸，超出屏幕范围后就会抛出溢出异常，这时候TextOverflow.ellipsis自然也起不了作用。

修复方案：用Expanded给Text提供宽度约束 #

只需要把Row中右侧的文本区域用Expanded包裹，让它占据Row剩余的所有水平空间，这样Text就有了明确的宽度限制，就能自动换行，同时列表项的高度会自适应文本的行数。

修改后的完整代码如下：

SliverList(
  delegate: SliverChildListDelegate(
    [
      for (var animal in response)
        GestureDetector(
          onTap: () {
            print('(DEBUG) Pressed on ${animal['id']} (${animal['name']})');
          },
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 10),
                child: Image.network(
                  animal['image_url'],
                  fit: BoxFit.cover,
                  width: 75,
                  height: 50,
                ),
              ),
              // 关键：用Expanded包裹右侧文本区域
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(15, 10, 20, 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        animal['name'].toString(),
                        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                        // 如果需要自动换行，不需要设置overflow，默认就是自动换行
                        // 如果你想在多行后显示省略号，可以加上下面两行：
                        // maxLines: 2,
                        // overflow: TextOverflow.ellipsis,
                      ),
                      if (animal['latin_name'] != null)
                        Text(
                          animal['latin_name'].toString(),
                          style: TextStyle(fontStyle: FontStyle.italic),
                        ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
    ],
  ),
)

额外说明 #

• 去掉了多余的Container（因为你没给它设置样式，Column直接放Padding里就行）
• 如果想要文本自动换行，不需要设置overflow属性，Text默认会在有宽度约束时自动换行
• 如果想要限制最大行数并显示省略号，就添加maxLines和overflow: TextOverflow.ellipsis组合使用

这样修改后，你的列表项就会根据文本内容自动调整高度，长文本也能正确换行显示啦！

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