Flutter - 当焦点移开时，TextField 的值丢失

Question

我有一个容器内包含两个TextField。第一个被定义为TextInputType.text，第二个被定义为TextInputType.number。每当我切换焦点（从第一个到第二个或从第二个到第一个），失去焦点的TextField也会失去其值。

奇怪的是，如果我将它们都定义为TextInputType.text，那么两个文本框都可以正常工作，但如果我将其中一个设置为除TextInputType.text外的任何类型，则两个文本框都会在失去焦点时丢失已输入的值。

非常恼人。我不知道为什么会发生这种情况。

这是小部件代码：

class LoginInput extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final String iconTag;
  final TextEditingController controller;
  final TextInputType inputType;
  final bool obscureText;

  LoginInput(this.hintText, this.icon, this.iconTag, this.controller,
      this.inputType, this.obscureText);

  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
      new Container(
          height: 56.0,
          child: new Material(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              elevation: 0.0,
              color: Colors.white,
              child: new Container(
                  child: new ListTile(
                leading: new Hero(
                    tag: iconTag, child: new Icon(icon, color: Colors.black)),
                title: new TextField(

                  keyboardType: inputType,
                  obscureText: obscureText,
                  textInputAction: TextInputAction.send,
                  controller: controller,
                  decoration: new InputDecoration(
                    border: InputBorder.none,
                    hintText: hintText,
                  ),
                  style: new TextStyle(
                      color: Colors.black,
                      fontSize: 18.0,
                      fontFamily: 'Caecilia',
                      fontWeight: FontWeight.w500),
                ),
              )))),
      new Divider(height: 0.0, color: Theme.of(context).dividerColor),
    ]);
  }
}

这是它的名称：

  final LoginInput nameField = new LoginInput("Full name", Icons.face, "leading_icon_name", new TextEditingController(), TextInputType.text,false);

  final LoginInput birthField = new LoginInput("Birth date", Icons.date_range, "leading_icon_birth", new TextEditingController(), TextInputType.number, false);

- Notheros

---

你能展示一下你的代码吗？ - ibhavikmakwana

是的，我会把它放在问题下面。 - Notheros

我将nameField和birthField都放在同一列中。在失去焦点时，两者都能正常工作（值得到保留）。textInputAction字段对我不可用，并且在https://docs.flutter.io/flutter/material/TextField-class.html中也没有找到它。 - Dinesh Balasubramanian

Answer 1

如果您移动您的

final TextEditingController controller;

在课程之外，TextField 的内容不会在每次失去焦点时被重置。

将此应用于您的代码：

final TextEditingController controller;

class LoginInput extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final String iconTag;
  final TextInputType inputType;
  final bool obscureText;

  LoginInput(this.hintText, this.icon, this.iconTag, this.inputType, this.obscureText);

  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
      new Container(
          height: 56.0,
          child: new Material(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),
              elevation: 0.0,
              color: Colors.white,
              child: new Container(
                  child: new ListTile(
                leading: new Hero(
                    tag: iconTag, child: new Icon(icon, color: Colors.black)),
                title: new TextField(

                  keyboardType: inputType,
                  obscureText: obscureText,
                  textInputAction: TextInputAction.send,
                  controller: controller,
                  decoration: new InputDecoration(
                    border: InputBorder.none,
                    hintText: hintText,
                  ),
                  style: new TextStyle(
                      color: Colors.black,
                      fontSize: 18.0,
                      fontFamily: 'Caecilia',
                      fontWeight: FontWeight.w500),
                ),
              )))),
      new Divider(height: 0.0, color: Theme.of(context).dividerColor),
    ]);
  }
}

- user12475565

Answer 2

我刚刚也遇到了同样的问题，解决方法是将我的 Widget 从 Stateless 转换为 Stateful。

这个线程中的最后一条评论可能会对你的问题有所帮助。

- Dunowen

---

谢谢！我稍后会尝试这个。 - Notheros

Answer 3

如果您现在正在使用statefulWidget，并且某些内容可以重新渲染您的视图，例如：PageView或您的逻辑。您应该使用TextEditingController。

记得释放它。

在您的statefulWidget内部。

class _MainViewState extends State<_MainView> {

PageController _pageController;
TextEditingController _textController;

  @override
  void initState() {
    _pageController = PageController(keepPage: true, initialPage: 2);
    _textController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    _textController.dispose();
    super.dispose();
  }

  ...

  TextField( 
     controller: _textController, //Add controller to your TextField
     onChanged: (v) {
        //do something
     },
     ...
  ),

}

从现在开始，您可以根据您的需要从_textController.text或onChanged函数触发TextField的价值。

- ANDYNVT