Flutter中如何根据输入字符数量动态调整TextFormField的字体大小

嗨，这个需求我太熟啦！很多涉及金额、长文本输入的场景都会用到，我来给你分享两个实用的实现思路，你可以根据自己的需求选～

方法一：基于字符数量快速调整（简单易上手） #

这种方法的核心是监听输入文本的长度，根据字符数阈值直接切换字体大小，适合对精度要求不高、想快速实现的场景。

具体步骤很简单：

1. 用StatefulWidget来管理状态，定义一个TextEditingController和存储当前字体大小的变量；
2. 在initState里给控制器添加监听，每次文本变化时根据长度调整字体；
3. 把动态的字体大小绑定到TextFormField的style属性上。

代码示例：

class ResizableTextFormField extends StatefulWidget {
  const ResizableTextFormField({super.key});

  @override
  State<ResizableTextFormField> createState() => _ResizableTextFormFieldState();
}

class _ResizableTextFormFieldState extends State<ResizableTextFormField> {
  final TextEditingController _controller = TextEditingController();
  double _currentFontSize = 16.0; // 初始字体大小
  static const _minFontSize = 12.0; // 最小字体限制，避免太小看不清

  @override
  void initState() {
    super.initState();
    // 添加文本变化监听
    _controller.addListener(_updateFontSize);
    // 初始化时检查一次（如果有默认文本的话）
    _updateFontSize();
  }

  void _updateFontSize() {
    final textLength = _controller.text.length;
    setState(() {
      if (textLength > 20) {
        _currentFontSize = _minFontSize;
      } else if (textLength > 10) {
        _currentFontSize = 14.0;
      } else {
        _currentFontSize = 16.0;
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose(); // 记得销毁控制器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,
      style: TextStyle(fontSize: _currentFontSize),
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        hintText: "请输入内容",
      ),
    );
  }
}

方法二：基于文本实际宽度精准调整（更贴合需求） #

如果你的输入内容包含不同宽度的字符（比如中文、英文混合），基于字符数量的调整可能不够精准——比如两个中文的宽度可能比四个英文还宽。这时候可以用TextPainter计算文本的实际宽度，和输入框的可用宽度对比，动态缩小字体直到内容完全容纳。

代码示例：

class PreciseResizableTextFormField extends StatefulWidget {
  const PreciseResizableTextFormField({super.key});

  @override
  State<PreciseResizableTextFormField> createState() => _PreciseResizableTextFormFieldState();
}

class _PreciseResizableTextFormFieldState extends State<PreciseResizableTextFormField> {
  final TextEditingController _controller = TextEditingController();
  double _currentFontSize = 16.0;
  static const _minFontSize = 12.0;

  @override
  void initState() {
    super.initState();
    _controller.addListener(_adjustFontSizePrecisely);
    _adjustFontSizePrecisely();
  }

  void _adjustFontSizePrecisely() {
    final text = _controller.text;
    if (text.isEmpty) {
      setState(() => _currentFontSize = 16.0);
      return;
    }

    // 计算输入框的可用宽度（这里假设左右各有20px的边距，你可以根据实际布局调整）
    final availableWidth = MediaQuery.of(context).size.width - 40;
    double fontSize = 16.0;

    // 循环缩小字体，直到文本宽度不超过可用宽度，或达到最小字体
    while (fontSize > _minFontSize) {
      final textPainter = TextPainter(
        text: TextSpan(text: text, style: TextStyle(fontSize: fontSize)),
        textDirection: TextDirection.ltr,
      )..layout(maxWidth: availableWidth);

      if (textPainter.width <= availableWidth) {
        break;
      }
      fontSize -= 0.5; // 每次缩小0.5，调整更细腻
    }

    setState(() => _currentFontSize = fontSize);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,
      style: TextStyle(fontSize: _currentFontSize),
      decoration: const InputDecoration(
        border: OutlineInputBorder(),
        hintText: "请输入内容",
      ),
    );
  }
}

小提示 #

• 一定要设置最小字体大小，不然输入特别长的文本时字体可能会小到看不清；
• 如果是金额输入场景，还可以结合NumberFormat处理千分位，同时调整字体，体验更好；
• 可以把这部分逻辑封装成自定义Widget，以后项目里直接复用就行～

备注：内容来源于stack exchange，提问作者Drompai