如何在TextField输入值后紧跟显示组件或文本？

针对你遇到的问题——需要在输入内容末尾紧跟显示货币文本，同时避免选中时的范围错误，这里提供两种可行方案：

方案一：重写TextEditingController的buildTextSpan（推荐文本场景） #

通过自定义控制器，正确处理选中范围，确保货币文本不会被纳入选中逻辑，避免范围错误。

class CurrencyTextEditingController extends TextEditingController {
  final String currency;

  CurrencyTextEditingController({required this.currency, String? text}) : super(text: text);

  @override
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
    final inputText = text;
    final defaultStyle = style ?? DefaultTextStyle.of(context).style;
    // 输入内容的文本span
    final inputSpan = TextSpan(text: inputText, style: defaultStyle);
    // 货币文本的span，可自定义样式
    final currencySpan = TextSpan(text: currency, style: defaultStyle.copyWith(color: Colors.grey));

    // 处理未选中/无效选中的情况
    if (!withComposing || !value.composing.isValid) {
      return TextSpan(children: [inputSpan, currencySpan]);
    }

    // 修正选中范围，限制在输入内容内，不包含货币文本
    final composingRange = value.composing;
    final validEnd = composingRange.end.clamp(0, inputText.length);
    final composingText = inputText.substring(composingRange.start, validEnd);

    return TextSpan(
      children: [
        TextSpan(text: inputText.substring(0, composingRange.start), style: defaultStyle),
        TextSpan(
          text: composingText,
          style: defaultStyle.merge(const TextStyle(decoration: TextDecoration.underline)),
        ),
        TextSpan(text: inputText.substring(validEnd), style: defaultStyle),
        currencySpan,
      ],
    );
  }
}

使用方式：

TextField(
  controller: CurrencyTextEditingController(currency: ' ¥'),
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    hintText: '请输入金额',
  ),
)

该方案完全基于原生TextField逻辑，光标、选中交互自然，适合仅添加文本的场景。

方案二：Stack+动态宽度计算（支持任意组件） #

如果需要添加图标、自定义组件等非文本内容，可以用Stack叠加布局，通过计算输入文本的宽度，让目标组件紧跟在输入内容末尾。

class CurrencyTextField extends StatefulWidget {
  final Widget suffixWidget;
  final String hintText;

  const CurrencyTextField({super.key, required this.suffixWidget, required this.hintText});

  @override
  State<CurrencyTextField> createState() => _CurrencyTextFieldState();
}

class _CurrencyTextFieldState extends State<CurrencyTextField> {
  final TextEditingController _controller = TextEditingController();
  final TextStyle _inputStyle = const TextStyle(fontSize: 16);
  double _inputTextWidth = 0;

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

  void _updateTextWidth() {
    // 计算输入文本的宽度
    final textPainter = TextPainter(
      text: TextSpan(text: _controller.text, style: _inputStyle),
      textDirection: TextDirection.ltr,
    )..layout(minWidth: 0, maxWidth: double.infinity);
    setState(() {
      _inputTextWidth = textPainter.width;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Stack(
          alignment: Alignment.centerLeft,
          children: [
            TextField(
              controller: _controller,
              style: _inputStyle,
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                hintText: widget.hintText,
                // 给右侧留出组件的空间，可根据实际调整
                contentPadding: const EdgeInsets.only(right: 30),
              ),
            ),
            Positioned(
              // 16是输入框默认的左侧内边距，根据实际情况调整
              left: 16 + _inputTextWidth,
              child: widget.suffixWidget,
            ),
          ],
        );
      },
    );
  }
}

使用方式（示例显示货币文本+图标）：

CurrencyTextField(
  hintText: '请输入金额',
  suffixWidget: Row(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Text(' ¥', style: TextStyle(fontSize: 16, color: Colors.grey)),
      SizedBox(width: 4),
      Icon(Icons.attach_money, size: 16, color: Colors.grey),
    ],
  ),
)

该方案灵活性更高，支持添加任意Widget，但需要手动处理布局计算和内边距调整。

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