Flutter如何将字符长度计数器放置在TextField内部

将计数器放在TextField的suffix后缀区域是完全可行的，也是实现该需求最简便的方案，除此之外也可以用Stack嵌套实现更灵活的位置自定义，具体实现方式如下：

方案1：使用InputDecoration的suffix属性实现（推荐） #

该方案无需额外嵌套组件，直接复用TextField原生装饰属性，适配性最好：

• 首先声明TextEditingController监听输入内容变化，维护当前输入长度状态
• 在InputDecoration的suffix属性中放入自定义的计数器组件
• 配置counter: const SizedBox.shrink()隐藏TextField默认的底部计数器，避免重复显示
• 适当调整contentPadding的右侧内边距，防止输入内容遮挡计数器

示例代码：

// 声明状态
final TextEditingController _controller = TextEditingController();
int _currentLength = 0;
final int _maxLength = 20;

// 初始化时添加监听
@override
void initState() {
  super.initState();
  _controller.addListener(() {
    setState(() {
      _currentLength = _controller.text.length;
    });
  });
}

// 销毁时释放controller
@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

// 构建TextField
TextField(
  controller: _controller,
  maxLength: _maxLength,
  decoration: InputDecoration(
    hintText: '请输入内容',
    // 隐藏默认底部计数器
    counter: const SizedBox.shrink(),
    // 右侧内置计数器
    suffix: Padding(
      padding: const EdgeInsets.only(right: 8.0),
      child: Text(
        '$_currentLength/$_maxLength',
        style: const TextStyle(color: Colors.grey, fontSize: 12),
      ),
    ),
    // 调整右侧内边距，避免内容遮挡计数器
    contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    border: const OutlineInputBorder(),
  ),
)

方案2：Stack嵌套实现自定义位置 #

如果需要把计数器放在输入框内部的任意位置（比如右上角、右下角），可以用Stack组件嵌套实现：

Stack(
  alignment: Alignment.bottomRight, // 调整对齐方式修改计数器位置
  children: [
    TextField(
      controller: _controller,
      maxLength: _maxLength,
      decoration: const InputDecoration(
        hintText: '请输入内容',
        counter: SizedBox.shrink(),
        contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        border: OutlineInputBorder(),
      ),
    ),
    // 自定义计数器位置
    Positioned(
      right: 8,
      bottom: 8,
      child: Text(
        '$_currentLength/$_maxLength',
        style: const TextStyle(color: Colors.grey, fontSize: 12),
      ),
    )
  ],
)

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