Flutter中Expanded嵌套SizedBox导致文本显示不全如何解决

问题根源 #

你用Expanded包裹SizedBox作为文本间的分隔，导致这些空的Expanded和文本所在的Expanded一起平分Row的总宽度。文本区域的可用空间被大幅压缩，最终出现单词拆分（比如"Awaiting Deposit"变成"awaitin g ...."）、换行异常的情况。

解决方案 #

直接移除分隔用的Expanded，改用固定宽度的SizedBox作为文本间的间隔，让文本所在的Expanded平分Row的剩余空间，保证每个文本区域有足够宽度展示内容。

修改后的代码示例：

Padding(
  padding: const EdgeInsets.symmetric(vertical: 8),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        child: Text(
          'Awaiting Deposit',
          style: regularTextStyle.copyWith(fontSize: 12),
          textAlign: TextAlign.center,
          maxLines: 2,
        ),
      ),
      SizedBox(width: 12), // 替换原Expanded(SizedBox())，直接用固定宽度分隔
      Expanded(
        child: Text(
          'Awaiting Confirmation',
          style: regularTextStyle.copyWith(fontSize: 12),
          textAlign: TextAlign.center,
          maxLines: 2,
        ),
      ),
      SizedBox(width: 12),
      Expanded(
        child: Text(
          'Perform Exchange',
          style: regularTextStyle.copyWith(fontSize: 12),
          textAlign: TextAlign.center,
          maxLines: 2,
        ),
      ),
      SizedBox(width: 12),
      Expanded(
        child: Text(
          'Done',
          style: regularTextStyle.copyWith(fontSize: 12),
          textAlign: TextAlign.center,
          maxLines: 2,
        ),
      ),
    ],
  ),
)

补充说明 #

• 你可以根据需求调整SizedBox的width值，比如改成8、16等，适配不同的间距需求。
• 如果需要间距随屏幕大小自适应，可替换为SizedBox(width: MediaQuery.of(context).size.width * 0.02)这类动态宽度计算方式。

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