flutter - 点击其中一个 TextField 时，TextField 文本被清除

Question

我遇到了一些奇怪的问题，如果您点击其中一个 TextField，它总是会被清除。

class MyEditText extends StatefulWidget {
  static String tag = "MyEditText";
  @override
  MyEditTextState createState() => MyEditTextState();
}

class MyEditTextState extends State<MyEditText> {
  String results = "";
  final TextEditingController controller = new TextEditingController();
  final TextEditingController controller1 = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    final email = TextField(
      decoration: InputDecoration(
          hintText: 'Enter Email',
          contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0)),
    );

    final password = TextField(
      obscureText: true,
      decoration: InputDecoration(
        hintText: 'Enter Password',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
      ),
    );

    return new Scaffold(
      appBar: new AppBar(
        automaticallyImplyLeading: false,
        title: new Text("EditText Sample"),
        backgroundColor: Colors.yellow,
      ),
      body: new Container(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[email, password],
        ),
      ),
    );
  }
}

我正在为此使用有状态的小部件，并且此屏幕启动的所有类也是有状态的。

注意:如果我注释掉所有 TextEditingController 及其用法，一切正常，所以我没有理解 TextEditingController 有什么问题

Answer 1

感谢更新代码。

你的原因TextEditingController被清除是因为你在 State<MyEditText> 中声明了变量.当状态被重新初始化时 - 这些变量也会这样做。

我可以看到 2 种方法来解决这个问题:

#1 - 将 Controller 从 State 移到父类，将它们作为参数传递

Controller 在 MyEditText 之外声明和维护小部件 - 在父类中。

class MyEditText extends StatefulWidget {
  MyEditText({ Key key, this.emailController, this.passwordController }): super(key: key);

  final TextEditingController emailController;
  final TextEditingController passwordController;

  static String tag = "MyEditText";

  @override
  MyEditTextState createState() => MyEditTextState();
}

class MyEditTextState extends State<MyEditText> {
  String results = "";

  @override
  Widget build(BuildContext context) {
    // ...
    TextField(
      controller: widget.emailController,
      // ...,
    ),
    TextField(
      controller: widget.passwordController,
      // ...,
    ),
    // ...
  }
}

然后在父类中声明 Controller 并将它们作为参数传递给MyEditText。 :

final emailController = TextEditingController();
final passwordController = TextEditingController();
// ...
MyEditText(
  emailController: emailController,
  passwordController: passwordController,
)

---

#2 - 在 didUpdateWidget 上重用旧状态的 Controller 打电话

Controller 可以在 MyEditText 之外声明类，但如果它们不是 - 小部件创建并维护 TextEditingController靠自己。

class MyEditText extends StatefulWidget {
  MyEditText({ Key key, this.emailController, this.passwordController }): super(key: key);

  final TextEditingController emailController;
  final TextEditingController passwordController;

  static String tag = "MyEditText";

  @override
  MyEditTextState createState() => MyEditTextState();
}

class MyEditTextState extends State<MyEditText> {

  TextEditingController _emailController;
  TextEditingController _passwordController;

  @override
  void initState() {
    super.initState();
    if (widget.emailController == null)
      _emailController = TextEditingController();
    if (widget.passwordController == null)
      _passwordController = TextEditingController();
  }

  @override
  void didUpdateWidget(MyEditText oldWidget) {
    super.didUpdateWidget(oldWidget);

    if (widget.emailController == null && oldWidget.emailController != null)
      _emailController = TextEditingController.fromValue(oldWidget.emailController.value);
    else if (widget.emailController != null && oldWidget.emailController == null)
      _emailController = null;

    if (widget.passwordController == null && oldWidget.passwordController != null)
      _passwordController = TextEditingController.fromValue(oldWidget.passwordController.value);
    else if (widget.passwordController != null && oldWidget.passwordController == null)
      _passwordController = null;
  }

  @override
  Widget build(BuildContext context) {
    // ...
    TextField(
      controller: _emailController ?? widget.emailController,
      // ...,
    ),
    TextField(
      controller: _passwordController ?? widget.passwordController,
      // ...,
    ),
    // ...
  }
  // ...
}

---

除了第二种方法调节 State<MyEditText> 之外，这两种方法都很相似。变量本身。

我会留给您来决定哪个更适合您的情况。

如果这有帮助，请告诉我。