Flutter：如何让Row中Expanded包裹的文本长单词保持单行显示（允许整体缩放文本）

这个场景我之前开发时也碰到过，默认的Text组件遇到长单词会自动拆行，想要让它保持单行同时自适应空间缩放，这几个靠谱的方案可以试试：

方案一：使用FittedBox包裹Text（推荐） #

FittedBox能让子组件（这里是Text）根据父容器的空间自动调整尺寸，配合softWrap: false就能强制长单词保持单行，不会拆分成多行。

示例代码：

Row(
  children: [
    // 你的图片组件
    Image.asset(
      'assets/your_image.png',
      width: 50,
      height: 50,
    ),
    const SizedBox(width: 8), // 图片和文本的间距
    Expanded(
      child: FittedBox(
        fit: BoxFit.scaleDown, // 仅当文本超过容器宽度时缩小，不会放大文本
        alignment: Alignment.centerLeft, // 保持文本左对齐，符合常规排版
        child: Text(
          "ThisIsAVeryLongWordThatShouldNeverBreakIntoMultipleLines",
          softWrap: false, // 彻底关闭自动换行逻辑
          style: TextStyle(fontSize: 16), // 基础字号，缩放会基于这个值调整
        ),
      ),
    ),
  ],
)

关键参数说明： #

• fit: BoxFit.scaleDown：确保只有当文本内容超出容器宽度时才缩小，不会让原本短的文本被放大，保持正常显示比例。
• softWrap: false：禁止文本自动换行，强制长单词始终在一行展示。
• alignment: Alignment.centerLeft：让文本始终左对齐，避免出现居中偏移的情况。

方案二：横向滚动（备选，不缩放） #

如果你不想改变文本大小，而是允许用户手动查看完整内容，可以用SingleChildScrollView包裹Text，开启横向滚动：

示例代码：

Row(
  children: [
    Image.asset(
      'assets/your_image.png',
      width: 50,
      height: 50,
    ),
    const SizedBox(width: 8),
    Expanded(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal, // 设置横向滚动
        child: Text(
          "ThisIsAVeryLongWordThatShouldNeverBreakIntoMultipleLines",
          softWrap: false,
        ),
      ),
    ),
  ],
)

这个方案适合需要保持文本原始大小的场景，但用户需要手动滚动才能看到完整的长单词。

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