Flutter技术问题：如何让Row中的文本在1-2行内不溢出？

问题分析 #

当前代码用多个Flexible包裹Row内元素，但未处理好文本换行逻辑，导致长文本溢出。需要让内容在1-2行内自适应显示。

解决方案 #

以下是优化后的代码，核心调整点：

• 合并"Contact:"标签与邮箱为单个RichText，保持语义关联
• 用Wrap替代Row，允许元素在空间不足时自动换行
• 调整联系电话的maxLines为2，支持两行显示
• 简化垂直分隔线实现，避免不必要的Flexible包裹

Wrap(
  spacing: 8.0, // 元素间水平间距
  crossAxisAlignment: WrapCrossAlignment.center,
  children: [
    RichText(
      text: TextSpan(
        text: "Contact: ",
        style: textStyleWith12500(MyColor.blackColor),
        children: <TextSpan>[
          TextSpan(
            text: "$outletEmail",
            style: textStyleWith10400(MyColor.darkGreyColor),
          ),
        ],
      ),
    ),
    // 垂直分隔线
    Container(
      width: 1,
      height: 12,
      color: MyColor.blackColor,
    ),
    Text(
      "$outletContact",
      style: textStyleWith10400WithUnderLine(MyColor.blueColor),
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
    ),
  ],
)

关键说明 #

• Wrap组件会根据可用宽度自动调整布局，超出一行时自动换行
• 合并标签与邮箱为RichText避免两者被拆分到不同行，提升可读性
• 垂直分隔线改用固定尺寸的Container，比VerticalDivider更易控制
• 联系电话设置maxLines:2，允许必要时换行，同时用ellipsis处理超长文本

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