Flutter：如何为TextFormField字符设置均匀字间距？能否基于宽度适配？

核心思路 #

• 先获取TextFormField的固定/实时宽度，布局完成后才能拿到准确值
• 监听输入内容变化，实时统计字符总数
• 计算单个字符的宽度，得出所有字符的总宽度，再用控件宽度减去总宽度得到可分配的额外空间
• 将额外空间平均分配到字符之间的间隙（n个字符对应n-1个间隙），得到动态的letterSpacing值

具体实现代码 #

以下是Flutter中的完整实现示例：

class SpacedTextFormField extends StatefulWidget {
  final double width;
  const SpacedTextFormField({super.key, required this.width});

  @override
  State<SpacedTextFormField> createState() => _SpacedTextFormFieldState();
}

class _SpacedTextFormFieldState extends State<SpacedTextFormField> {
  final TextEditingController _controller = TextEditingController();
  double _letterSpacing = 0.0;
  final TextStyle _textStyle = const TextStyle(fontSize: 16);

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

  void _updateLetterSpacing() {
    final text = _controller.text;
    if (text.isEmpty) {
      setState(() => _letterSpacing = 0.0);
      return;
    }

    // 计算单个字符的宽度
    final textPainter = TextPainter(
      text: TextSpan(text: text[0], style: _textStyle),
      textDirection: TextDirection.ltr,
    )..layout();
    final singleCharWidth = textPainter.width;
    final totalCharsWidth = singleCharWidth * text.length;
    final availableSpace = widget.width - totalCharsWidth;

    // 仅当有额外空间且字符数>1时计算字间距
    if (text.length > 1 && availableSpace > 0) {
      setState(() => _letterSpacing = availableSpace / (text.length - 1));
    } else {
      setState(() => _letterSpacing = 0.0);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      child: TextFormField(
        controller: _controller,
        style: _textStyle.copyWith(letterSpacing: _letterSpacing),
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          hintText: '输入内容',
        ),
      ),
    );
  }
}

关键注意事项 #

• 若使用自定义字体或调整字号，需同步更新_textStyle，保证单个字符宽度计算准确
• 若TextFormField宽度是动态自适应的，可用LayoutBuilder包裹，替换固定width参数，实时获取控件宽度
• 当字符总宽度超过控件宽度时，自动将字间距设为0，避免字符重叠或挤压
• 可根据需求添加输入长度限制，防止字符过多导致布局异常

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