Flutter如何将TextFormField的计数器移动到输入框上方

Flutter 官方提供了自定义计数器的相关参数，不需要完全重写计数器逻辑，以下两种是经过验证的简便实现方案：

方案1：使用 Column 嵌套自定义顶部计数栏 #

这种方式布局逻辑最直观，适配性强，不需要调整偏移量：

1. 隐藏 TextFormField 默认的底部计数器
2. 在输入框上方新增一行，右侧放自定义计数器，和输入框共用长度状态即可

//  State 类中声明变量
final TextEditingController _controller = TextEditingController();
int _inputLength = 0;
const int _maxLength = 1000;

// build 方法中使用
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.min,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(label, style: const TextStyle(fontSize: 30)),
        Text('$_inputLength/$_maxLength', style: TextStyle(color: Colors.grey[600])),
      ],
    ),
    TextFormField(
      controller: _controller,
      maxLength: _maxLength,
      onChanged: (val) => setState(() => _inputLength = val.length),
      decoration: const InputDecoration(
        counter: SizedBox.shrink(), // 隐藏默认底部计数器
        labelText: null, // 移除默认label，避免重复显示
      ),
    )
  ],
)

该方案自带的 maxLength 输入限制仍然生效，无需额外处理超长输入逻辑。

方案2：使用 buildCounter 回调直接定位 #

如果不想额外维护状态变量，可以直接用 InputDecoration 自带的 buildCounter 回调，配合 Stack 实现顶部定位：

Stack(
  clipBehavior: Clip.none,
  children: [
    TextFormField(
      maxLength: 1000,
      decoration: InputDecoration(
        labelText: label,
        labelStyle: const TextStyle(fontSize: 30),
        buildCounter: (context, {required currentLength, required isFocused, maxLength}) {
          return Positioned(
            right: 0,
            top: -24, // 可根据实际label大小调整偏移值
            child: Text(
              '$currentLength/$maxLength',
              style: TextStyle(color: Colors.grey[600]),
            ),
          );
        },
        counter: const SizedBox.shrink(),
      ),
    )
  ],
)

该方案无需自己维护输入长度和控制器，所有计数逻辑完全由官方组件处理，仅需调整偏移量适配你的页面样式即可。

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