Flutter中如何实现文字缩小至指定尺寸后仍不适配则自动换行？

要实现先将文字缩小到指定最小字号（如8px），仍无法适配则自动换行的效果，直接用FittedBox做不到——因为它只会缩放整个文本块，不会触发换行。可以通过LayoutBuilder + TextPainter判断文本宽度，结合FittedBox和自动换行Text实现逻辑分支：

核心思路 #

1. 用LayoutBuilder获取容器的可用宽度，避免硬编码尺寸
2. 用TextPainter计算文本在最小字号下的单行宽度
3. 对比文本宽度与容器宽度：
   • 若文本能在单行放下，用FittedBox将文本从基础字号缩至不小于最小字号的尺寸
   • 若仍放不下，切换为自动换行的Text，固定使用最小字号

自定义实现组件 #

class AdaptiveText extends StatelessWidget {
  final String text;
  final double minFontSize;
  final TextStyle? style;

  const AdaptiveText({
    super.key,
    required this.text,
    this.minFontSize = 8,
    this.style,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 计算最小字号下文本的单行宽度
        final textPainter = TextPainter(
          text: TextSpan(
            text: text,
            style: style?.copyWith(fontSize: minFontSize) ?? TextStyle(fontSize: minFontSize),
          ),
          maxLines: 1,
          textDirection: TextDirection.ltr,
        )..layout(maxWidth: double.infinity);

        final minTextWidth = textPainter.width;
        final containerWidth = constraints.maxWidth;

        if (minTextWidth <= containerWidth) {
          // 单行可适配，用FittedBox缩放（不小于最小字号）
          return FittedBox(
            fit: BoxFit.scaleDown,
            child: Text(
              text,
              style: style?.copyWith(minFontSize: minFontSize),
              maxLines: 1,
            ),
          );
        } else {
          // 最小字号仍超宽，自动换行
          return Text(
            text,
            style: style?.copyWith(fontSize: minFontSize) ?? TextStyle(fontSize: minFontSize),
            softWrap: true,
            overflow: TextOverflow.visible,
          );
        }
      },
    );
  }
}

使用示例 #

把组件放到固定宽度的容器中测试：

Container(
  width: 120,
  padding: EdgeInsets.all(8),
  color: Colors.grey.shade100,
  child: AdaptiveText(
    '测试文本：先缩到8px，放不下就换行',
    minFontSize: 8,
    style: TextStyle(fontSize: 18, color: Colors.black87),
  ),
)

注意事项 #

• TextPainter的textDirection要和实际场景一致，避免计算宽度错误
• 如果需要支持多行缩放后再换行，可以调整maxLines参数，但逻辑会更复杂，当前方案优先保证单行缩放，超出再换行

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