Flutter 处理来自其他小部件的输入文本字段答案

【问题标题】：Flutter handle input text field from other widgetFlutter 处理来自其他小部件的输入文本字段
【发布时间】：2019-04-05 15:19:50
【问题描述】：

我正在使用来自 GeekyAnts 的 Flutter 登录主页动画。您可以在以下位置找到它： https://github.com/GeekyAnts/flutter-login-home-animation

我无法处理在字段中输入的用户名和密码值，因为这些字段是通过名为 FormContainer 的小部件从登录页面调用的，该小部件包含另外两个名为 InputFieldArea 的小部件。在TextFormField中使用onChanged时，不知道如何让这些值到达父LoginPage类。

您能否帮助我了解如何处理登录页面中的字段更改以使登录正常工作？

谢谢！

【问题讨论】：

标签： dart flutter

【解决方案1】：

使用TextEditingController，如Retrieve the value of a text field 中所述。

TextFormField 将控制器作为构造函数参数，您可以通过类似的构造函数将其传递给您的 InputFieldArea：

class InputFieldArea extends StatelessWidget {
  final TextEditingController controller;
  final bool obscureText;
  // ...

  const InputFieldArea({Key key, this.controller, this.obscureText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      // ...
      child: TextFormField(
        controller: controller,
        obscureText: obscureText,
        // ...
      ),
    );
  }
}

控制器存储在State 中很重要，这样如果小部件由于某种原因被重建，控制器不会被重新创建：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          InputFieldArea(
            controller: _usernameController,
            obscureText: false,
          ),
          InputFieldArea(
            controller: _passwordController,
            obscureText: true,
          ),
          RaisedButton(
            onPressed: () {
              // example how to read the current text field values
              print('username: ${_usernameController.text}, password: ${_passwordController.text}');
            },
          )
        ],
      )
    );
  }
}

还可以查看shrine login demo。

【讨论】：