如何向 TextField 显示文本但不包含在 onSaved 中？答案

【问题标题】：How to show text to TextField but not include in onSaved?如何向 TextField 显示文本但不包含在 onSaved 中？
【发布时间】：2021-10-08 04:11:09
【问题描述】：

如何向 TextField 显示文本但不包含在 onSaved 中？

我想创建 textFieldCounter 在 onSaved 实际上返回字符串。我以字符串格式返回数字。所以，如果我使用这个小部件，我可以将 onSaved 解析为 int

但是，这种设计在文本字段中有字符串，例如“Orang”

期待：

我已经尝试创建 TextFieldWithCounter

实际：

我尝试添加后缀文本。但是，TextField 的 suffixText 位置结束：

我的代码：

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

  final TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    _controller.text =
        widget.value != null ? widget.value.toString() : _counter.toString();
    _counter = widget.value ?? 1;
  }

  @override
  Widget build(BuildContext context) {
    return OutlineTextField(
      readOnly: true,
      textEditingController: _controller,
      labelText: widget.labelText,
      onSaved: widget.onSaved,
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          HOutlinedButton.icon(
            onPressed: _counter == 1
                ? null
                : () {
                    setState(() {
                      if (_counter > 1) _counter--;
                      _controller.text = _counter.toString();
                    });
                  },
            icon: Icon(
              HelperIcons.mines,
              size: 20.0,
            ),
          ),
          SizedBox(width: 8),
          HOutlinedButton.icon(
            onPressed: () {
              setState(() {
                _counter++;
                _controller.text = _counter.toString();
              });
            },
            icon: Icon(
              HelperIcons.plus,
              size: 20.0,
            ),
          ),
          SizedBox(width: 12.0),
        ],
      ),
    );
  }
}

注意：

我尝试添加字符串_controller.text = _counter.toString() + ' Orang';，但在onSaved 中将返回1 Orang。所以，我无法解析为 int

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

使用

onSaved: () {
     return _counter.toString().split(" ")[0];
}

现在它将仅将整数部分作为字符串返回，您可以将其解析为 int。

【讨论】：

【解决方案2】：

你可以在后缀文本中使用空格，但它不实用

suffixText("Orang"),

before

使用后

suffixText("Orang ")

after

或

你可以使用堆栈。

将容器和文本字段放入堆栈

Stack(children: [Container(
                            //adjust according to your widget
                                  padding:
                                      EdgeInsets.only(left: 20, right: 20),
                                  margin: EdgeInsets.only(
                                      left: 40, right: 15, top: 15),
                                  child: Text(
                                    "Orang",
                                    style: TextStyle(fontSize: 18),
                                  )),
                                  OutlineTextField(
                                    //your textfield
                                  )],),

using stack

【讨论】：

【解决方案3】：

你可以使用onsaved一个空字符串""

return _counter.toString().split(" ")[0];

【讨论】：