Flutter UI渲染异常求助：标题过长（两行）引发布局报错

咱们先拆解下问题根源：你直接在Row组件里放了Text，当标题太长要显示两行时触发了渲染异常。这是因为Row默认不会给子元素提供横向宽度约束，Text在没有明确宽度限制的情况下，会试图占用无限水平空间，和你设置的maxLines:2换行逻辑冲突，最终导致渲染报错。

下面给你几个实用的解决方案：

方案1：用Expanded包裹Text（推荐，适配性最强） #

Expanded会让Text自动占据Row里剩余的可用空间，同时给Text明确的宽度约束，这样Text就能正常换行显示了：

Widget _buildRowItem() {
  final Row mainRow = Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      Expanded( // 新增Expanded包裹Text
        child: Text(
          _feed.getTitle(),
          maxLines: 2,
          softWrap: true,
          textAlign: TextAlign.start,
          overflow: TextOverflow.ellipsis, // 建议加上溢出省略，体验更友好
        ),
      ),
    ],
  );
  final Container container = Container(
    child: mainRow,
    padding: const EdgeInsets.all(4.0),
    color: Colors.teal,
    // 你的其他容器属性...
  );
  return container;
}

方案2：给Text设置固定宽度（仅适合固定布局场景） #

如果你明确知道Text需要的宽度，可以用SizedBox包裹，但这种方式在不同屏幕尺寸下适配性较差，不推荐通用场景使用：

Widget _buildRowItem() {
  final Row mainRow = Row(
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      SizedBox(
        width: 200, // 设置固定宽度
        child: Text(
          _feed.getTitle(),
          maxLines: 2,
          softWrap: true,
          textAlign: TextAlign.start,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    ],
  );
  final Container container = Container(
    child: mainRow,
    padding: const EdgeInsets.all(4.0),
    color: Colors.teal,
    // 你的其他容器属性...
  );
  return container;
}

额外优化提示 #

• 一定要加上overflow: TextOverflow.ellipsis，当标题超过两行时会显示省略号，避免内容被生硬截断。
• 如果你的Row后续还要添加图片、图标等其他组件，Expanded会自动调整Text的宽度适配剩余空间，这是最灵活的布局方案。

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