Flutter：TextField内容超出指定宽度时自动缩小字体

以下是几种低开销、高性能的实现方案，避免频繁计算或不必要的Widget重建：

方案1：二分法计算+防抖+局部状态更新（最优性能） #

通过TextPainter轻量计算、二分法快速定位合适字号、防抖减少计算触发频率，再用ValueListenableBuilder限定重建范围，把性能损耗降到最低。

class AutoSizedTextField extends StatefulWidget {
  final double maxWidth;
  final double initialFontSize;
  final double minFontSize;

  const AutoSizedTextField({
    super.key,
    required this.maxWidth,
    this.initialFontSize = 16.0,
    this.minFontSize = 10.0,
  });

  @override
  State<AutoSizedTextField> createState() => _AutoSizedTextFieldState();
}

class _AutoSizedTextFieldState extends State<AutoSizedTextField> {
  late TextEditingController _controller;
  final ValueNotifier<double> _fontSizeNotifier = ValueNotifier(16.0);
  Timer? _debounceTimer;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController()..addListener(_onTextChanged);
    _fontSizeNotifier.value = widget.initialFontSize;
  }

  @override
  void dispose() {
    _controller.dispose();
    _fontSizeNotifier.dispose();
    _debounceTimer?.cancel();
    super.dispose();
  }

  void _onTextChanged() {
    // 防抖：输入停止50ms后再计算，避免每输入一个字符就触发
    _debounceTimer?.cancel();
    _debounceTimer = Timer(const Duration(milliseconds: 50), _adjustFontSize);
  }

  void _adjustFontSize() {
    final text = _controller.text;
    if (text.isEmpty) {
      _fontSizeNotifier.value = widget.initialFontSize;
      return;
    }

    // 二分法快速找到最大适配字号，比逐步加减效率高
    double low = widget.minFontSize;
    double high = widget.initialFontSize;
    double bestSize = _fontSizeNotifier.value;
    final textPainter = TextPainter(textDirection: TextDirection.ltr);

    // 迭代5次足够获得精确结果
    for (int i = 0; i < 5; i++) {
      final mid = (low + high) / 2;
      textPainter.text = TextSpan(text: text, style: TextStyle(fontSize: mid));
      textPainter.layout(maxWidth: widget.maxWidth);

      if (textPainter.width <= widget.maxWidth) {
        bestSize = mid;
        low = mid;
      } else {
        high = mid;
      }
    }

    _fontSizeNotifier.value = bestSize;
  }

  @override
  Widget build(BuildContext context) {
    // 仅在字号变化时重建TextField的style部分，避免整棵树重建
    return ValueListenableBuilder<double>(
      valueListenable: _fontSizeNotifier,
      builder: (context, fontSize, child) {
        return TextField(
          controller: _controller,
          style: TextStyle(fontSize: fontSize),
          decoration: const InputDecoration(border: OutlineInputBorder()),
        );
      },
    );
  }
}

方案优势： #

• 二分法将计算次数从N次（逐步加减）压缩到固定5次，效率提升显著
• 防抖避免输入过程中频繁触发计算
• ValueListenableBuilder限定重建范围，仅更新字体样式，不影响其他Widget

方案2：适配动态宽度场景 #

如果TextField的宽度是自适应屏幕/父布局的，可结合LayoutBuilder实时获取可用宽度，同时监听宽度变化触发字号调整：

// 在方案1的State类中添加以下代码
final ValueNotifier<double> _availableWidthNotifier = ValueNotifier(0);

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      // 减去输入框内边距，得到实际可用于文本的宽度
      final availableWidth = constraints.maxWidth - 24;
      if (_availableWidthNotifier.value != availableWidth) {
        _availableWidthNotifier.value = availableWidth;
        // 宽度变化时重新计算字号
        _adjustFontSize();
      }
      return ValueListenableBuilder<double>(
        valueListenable: _fontSizeNotifier,
        builder: (context, fontSize, child) {
          return TextField(
            controller: _controller,
            style: TextStyle(fontSize: fontSize),
            decoration: const InputDecoration(border: OutlineInputBorder()),
          );
        },
      );
    },
  );
}

// 同时修改_adjustFontSize方法中的widget.maxWidth为_availableWidthNotifier.value
void _adjustFontSize() {
  final text = _controller.text;
  if (text.isEmpty) {
    _fontSizeNotifier.value = widget.initialFontSize;
    return;
  }

  double low = widget.minFontSize;
  double high = widget.initialFontSize;
  double bestSize = _fontSizeNotifier.value;
  final textPainter = TextPainter(textDirection: TextDirection.ltr);
  final maxWidth = _availableWidthNotifier.value;

  for (int i = 0; i < 5; i++) {
    final mid = (low + high) / 2;
    textPainter.text = TextSpan(text: text, style: TextStyle(fontSize: mid));
    textPainter.layout(maxWidth: maxWidth);

    if (textPainter.width <= maxWidth) {
      bestSize = mid;
      low = mid;
    } else {
      high = mid;
    }
  }

  _fontSizeNotifier.value = bestSize;
}

注意事项： #

• 设置合理的minFontSize，避免字体过小影响可读性
• 防抖时间可根据需求调整（30-100ms均适用）
• 若需支持多行文本，需在TextPainter中设置maxLines参数

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