Flutter中使用Spacer导致Row内文本溢出问题的解决方法

你的问题核心在于：Spacer仅负责在Row两端分配剩余空白空间，但未限制长文本组件的最大宽度，当文本内容超过Row可用空间时就会出现溢出。以下是几种实用的解决方式：

方法一：用Expanded包裹长文本组件 #

Expanded会强制子组件占据Row中除固定宽度元素（如SizedBox、短文本）之外的可用空间，结合Text的溢出属性即可自动处理超长内容。

修改后的代码示例：

title: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Spacer(),
    Expanded(
      child: Text(
        "非常长的文本内容这里可以写很多很多很多字",
        style: Theme.of(context).textTheme.bodyText1?.copyWith(
              color: Theme.of(context).colorScheme.white.withOpacity(0.85),
            ),
        overflow: TextOverflow.ellipsis, // 显示省略号更直观，也可保留fade
        softWrap: false,
        textAlign: TextAlign.right,
      ),
    ),
    const SizedBox(width: 10),
    Text(
      "smaller text",
      style: Theme.of(context).textTheme.bodyText1?.copyWith(
            color: Theme.of(context).colorScheme.white.withOpacity(0.85),
          ),
      overflow: TextOverflow.fade,
      softWrap: false,
      textAlign: TextAlign.left,
    ),
    const Spacer(),
  ],
),

方法二：用Flexible实现比例分配空间 #

如果两个文本都可能变长，可以用Flexible替代Expanded，通过flex属性设置空间分配比例，确保两者都被限制在各自的空间范围内。

代码示例：

title: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Spacer(),
    Flexible(
      flex: 2, // 长文本分配2份空间
      child: Text(
        "非常长的文本内容这里可以写很多很多很多字",
        style: Theme.of(context).textTheme.bodyText1?.copyWith(
              color: Theme.of(context).colorScheme.white.withOpacity(0.85),
            ),
        overflow: TextOverflow.ellipsis,
        softWrap: false,
        textAlign: TextAlign.right,
      ),
    ),
    const SizedBox(width: 10),
    Flexible(
      flex: 1, // 短文本分配1份空间
      child: Text(
        "smaller text",
        style: Theme.of(context).textTheme.bodyText1?.copyWith(
              color: Theme.of(context).colorScheme.white.withOpacity(0.85),
            ),
        overflow: TextOverflow.fade,
        softWrap: false,
        textAlign: TextAlign.left,
      ),
    ),
    const Spacer(),
  ],
),

补充建议 #

• 可根据需求调整TextOverflow属性：ellipsis显示省略号、fade渐隐截断、clip直接截断，其中ellipsis对用户更友好。
• 如果不需要Row两端的Spacer，直接用Expanded/Flexible包裹文本即可实现自适应布局。

内容的提问来源于stack exchange，提问作者sina .s