Flutter：如何在指定宽度内实现文本自动换行？

你的问题出在Row组件没有给左侧文本设置宽度约束，Row默认会让子组件尽可能占用所需空间，导致长文本直接超出屏幕边界。

只需要给左侧的Text外层套一个Expanded组件，让它占据Row的剩余空间，这样文本就能自动换行。同时调整crossAxisAlignment为合适的对齐方式，避免时间文本和主体文本的布局错位。

修改后的代码如下：

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Container(
    padding: EdgeInsets.all(5),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start, // 让时间与文本顶部对齐，符合短信布局习惯
      children: [
        Expanded( // 核心修改：用Expanded限制文本宽度，使其在Row剩余空间内自动换行
          child: Text(
            'Add a very long text the goes a few lines and keeps going to test how it wraps properly without overflowing the screen',
            style: TextStyle(fontSize: 16, color: Colors.black),
            softWrap: true,
            overflow: TextOverflow.clip, // 可选，极端场景下防止溢出
          ),
        ),
        SizedBox(width: 8), // 给文本和时间之间添加间距，提升美观度
        Text(
          '3:08',
          style: TextStyle(fontSize: 12, color: Colors.black38),
        ),
      ],
    ),
  ),
)

关键说明： #

• Expanded会强制左侧文本占据Row中除时间组件外的所有可用宽度，让文本在约束范围内自动换行
• 调整crossAxisAlignment为CrossAxisAlignment.start，避免时间文本和长文本底部对齐导致的布局不协调
• 增加SizedBox是为了优化文本与时间之间的留白，更贴近真实短信的视觉效果

内容的提问来源于stack exchange，提问作者I. Antonov