Flutter如何在TextField中展示附加文本且不被onSaved方法返回

解决方案 #

你当前的TextField设置了readOnly: true，仅通过加减按钮修改数值，最简单的实现方式如下：

1. 保留你之前将后缀拼入输入文本的逻辑，让输入框内可以显示X Orang的符合设计的效果
2. 不要直接透传上层传入的onSaved回调，先自行处理掉文本里的后缀再向上传递，即可保证上层拿到纯数字格式的字符串

修改后的完整代码如下：

class _TextFieldCounterState extends State<TextFieldCounter> {
  int _counter = 1;

  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _counter = widget.value ?? 1;
    // 拼接后缀用于显示
    _controller.text = '${_counter.toString()} Orang';
  }

  @override
  Widget build(BuildContext context) {
    return OutlineTextField(
      readOnly: true,
      textEditingController: _controller,
      labelText: widget.labelText,
      // 劫持onSaved回调，处理后再向上传递
      onSaved: (value) {
        if (value == null || widget.onSaved == null) return;
        final pureNumberStr = value.replaceFirst(' Orang', '').trim();
        widget.onSaved!(pureNumberStr);
      },
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          HOutlinedButton.icon(
            onPressed: _counter == 1
                ? null
                : () {
                    setState(() {
                      if (_counter > 1) _counter--;
                      _controller.text = '${_counter.toString()} Orang';
                    });
                  },
            icon: Icon(
              HelperIcons.mines,
              size: 20.0,
            ),
          ),
          SizedBox(width: 8),
          HOutlinedButton.icon(
            onPressed: () {
              setState(() {
                _counter++;
                _controller.text = '${_counter.toString()} Orang';
              });
            },
            icon: Icon(
              HelperIcons.plus,
              size: 20.0,
            ),
          ),
          SizedBox(width: 12.0),
        ],
      ),
    );
  }
}

该实现完全满足你的两个核心需求：输入框内显示带Orang后缀的内容，onSaved回调返回纯数字字符串可直接解析为int类型。如果后续需要开放手动输入功能，可额外添加TextInputFormatter限制仅输入数字，同时处理光标位置避免用户误改后缀即可。

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