Flutter：输入内容后如何保留TextField的Hint Text

你需要的是输入内容后提示文本（Hint Text）仍保留在输入内容右侧的效果，以下是两种可行的实现方式：

方案一：自定义叠加布局（精准控制位置） #

通过Stack将TextField和提示文本组件叠加，监听输入内容变化来动态调整提示文本的位置，让它始终紧跟输入内容右侧：

class PersistentHintTextField extends StatefulWidget {
  final String hintText;
  final TextStyle? hintStyle;
  final TextEditingController? controller;

  const PersistentHintTextField({
    super.key,
    required this.hintText,
    this.hintStyle,
    this.controller,
  });

  @override
  State<PersistentHintTextField> createState() => _PersistentHintTextFieldState();
}

class _PersistentHintTextFieldState extends State<PersistentHintTextField> {
  late TextEditingController _controller;
  final GlobalKey _textFieldKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _controller = widget.controller ?? TextEditingController();
    _controller.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    if (widget.controller == null) _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.centerLeft,
      children: [
        TextField(
          key: _textFieldKey,
          controller: _controller,
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          ),
        ),
        // 输入为空时显示默认提示
        if (_controller.text.isEmpty)
          Positioned(
            left: 16,
            child: Text(
              widget.hintText,
              style: widget.hintStyle ?? TextStyle(color: Colors.grey[400]),
            ),
          ),
        // 输入有内容时，提示文本紧跟输入内容右侧
        if (_controller.text.isNotEmpty)
          Positioned(
            left: _getHintOffset(),
            child: Text(
              widget.hintText,
              style: widget.hintStyle ?? TextStyle(color: Colors.grey[400]),
            ),
          ),
      ],
    );
  }

  double _getHintOffset() {
    final renderBox = _textFieldKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox == null) return 16;

    final textPainter = TextPainter(
      text: TextSpan(text: _controller.text, style: DefaultTextStyle.of(context).style),
      textDirection: TextDirection.ltr,
      maxLines: 1,
    )..layout(maxWidth: renderBox.size.width - 32);

    return 16 + textPainter.width + 8; // 16为左内边距，8为输入内容与提示的间距
  }
}

使用方式：

PersistentHintTextField(
  hintText: '你的提示文本',
  hintStyle: TextStyle(color: Colors.grey[500]),
)

方案二：利用InputDecoration的suffix调整布局（简洁版） #

通过自定义suffix组件，让提示文本突破固定位置限制，紧跟输入内容右侧：

class SimplePersistentHintTextField extends StatefulWidget {
  final String hintText;
  final TextStyle? hintStyle;

  const SimplePersistentHintTextField({
    super.key,
    required this.hintText,
    this.hintStyle,
  });

  @override
  State<SimplePersistentHintTextField> createState() => _SimplePersistentHintTextFieldState();
}

class _SimplePersistentHintTextFieldState extends State<SimplePersistentHintTextField> {
  final TextEditingController _controller = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      onChanged: (value) => setState(() {}),
      decoration: InputDecoration(
        border: const OutlineInputBorder(),
        contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        hintText: _controller.text.isEmpty ? widget.hintText : null,
        suffix: IntrinsicWidth(
          child: OverflowBox(
            alignment: Alignment.centerLeft,
            minWidth: 0,
            child: Text(
              _controller.text.isNotEmpty ? widget.hintText : '',
              style: widget.hintStyle ?? TextStyle(color: Colors.grey[400]),
            ),
          ),
        ),
      ),
    );
  }
}

这个方案无需复杂的位置计算，利用OverflowBox让suffix文本紧跟输入内容，输入为空时用默认hintText显示提示。

内容的提问来源于stack exchange，提问作者Хуршид Собиров