Flutter：如何根据容器尺寸缩放多行文本字体？FittedBox失效

FittedBox不适合处理多行文本的字体缩放，因为它会把整个文本组件当作单个单元缩放——先按原始字体排版出多行文本的整体尺寸，再强行把这个大尺寸缩放到容器里，自然会导致字体变得极小。下面是两种可行的解决办法：

方案1：使用AutoSizeText第三方包（推荐） #

这是专门解决文本自适应大小问题的库，支持多行文本，配置简单。

1. 先在pubspec.yaml中添加依赖：

dependencies:
  auto_size_text: ^3.0.0 # 版本号以pub.dev最新为准

2. 替换原有代码：

SizedBox(
  width: MediaQuery.of(context).size.width,
  // 可根据需求添加height限制
  child: AutoSizeText(
    widget.model.poem,
    textAlign: TextAlign.justify,
    style: TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.w600,
      fontStyle: FontStyle.normal,
    ),
    maxLines: null, // 允许文本自动换行，不限行数
    minFontSize: 12, // 设置最小字体，避免过度缩小
    overflow: TextOverflow.visible,
  ),
)

方案2：手动计算字体大小（无依赖） #

如果不想引入第三方库，可以通过LayoutBuilder和TextPainter手动计算合适的字体大小：

LayoutBuilder(
  builder: (context, constraints) {
    final containerWidth = constraints.maxWidth;
    final containerHeight = constraints.maxHeight;
    double targetFontSize = 24; // 初始字体大小
    final baseTextStyle = TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.w600,
      fontStyle: FontStyle.normal,
    );

    final textPainter = TextPainter(
      text: TextSpan(text: widget.model.poem, style: baseTextStyle),
      textAlign: TextAlign.justify,
      textDirection: TextDirection.ltr,
      maxLines: null,
    );

    // 迭代调整字体大小，直到文本高度适配容器或达到最小限制
    while (true) {
      textPainter.text = TextSpan(
        text: widget.model.poem,
        style: baseTextStyle.copyWith(fontSize: targetFontSize),
      );
      textPainter.layout(maxWidth: containerWidth);
      // 当文本高度小于容器高度，或字体已到最小值时停止
      if (textPainter.size.height <= containerHeight || targetFontSize <= 12) {
        break;
      }
      targetFontSize -= 1;
    }

    return SizedBox(
      width: containerWidth,
      height: containerHeight,
      child: Text(
        widget.model.poem,
        textAlign: TextAlign.justify,
        style: baseTextStyle.copyWith(fontSize: targetFontSize),
      ),
    );
  },
)

注意点 #

• 手动计算时要设置最小字体限制，防止字体无限缩小；
• TextDirection要根据你的文本语言调整（比如中文用TextDirection.ltr即可）。

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