You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ListView中Row内的Text无法换行如何解决?

解决ListView中Row内Text无法换行的问题

你的问题核心在于Row是无水平边界约束的容器,默认会让子组件无限延伸,导致Text没有宽度限制,自然不会换行。只需给Text添加宽度约束即可解决,最直接的方法是用Expanded包裹Text:

ListView.builder(
  itemCount: 1,
  itemBuilder: (ctx, i) => Row(
    children: const <Widget>[
      Expanded(
        child: Text("very very very very very very very very very very very very very very very very very very long text"),
      ),
    ],
  ),
);

原理说明:

  • Expanded会强制子组件填充Row内的可用水平空间(即ListView的宽度),给Text设定了明确的最大宽度。
  • Text默认maxLines: null(自动换行)、softWrap: true(允许换行),当文本长度超过约束宽度时,就会自动折行显示。

如果需要限制最大行数,可以给Text添加maxLines属性,超出部分会自动省略:

Expanded(
  child: Text(
    "very very very very very very very very very very very very very very very very very very long text",
    maxLines: 3,
    overflow: TextOverflow.ellipsis, // 超出部分显示省略号
  ),
)

内容的提问来源于stack exchange,提问作者LucioleMaléfique

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.25 10:33:08