在 Flutter 的表單中將數據從一個小部件傳遞到另一個小部件

Question

https://flutter.dev/docs/cookbook/forms/validation

在這里，他們在Form中使用了兩個小部件： TextFormWidget和ElevatedButton 。 他們說TextFormWidget的驗證器接收用戶輸入的值。

我想在用戶按下ElevatedButton時打印該值。

如何讓ElevatedButton從TextFormWidget接收該值？

@override
  Widget build(BuildContext context) 
  {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
                   TextFormField(
                        // The validator receives the text that the user has entered.
                        validator: (value) 
                        {
                           if (value == null || value.isEmpty) 
                           {
                               return 'Please enter some text';
                           }
                           return null;
                        },
                    ),


                   ElevatedButton(
                       onPressed: () {
                          if (_formKey.currentState!.validate()) {
                             ....
                          }
                       },
                       child: Text('Submit'),
                   ),
              ],
      ),
    );
  }

Answer 1

設置TextFormField的controller屬性並從那里讀取數據。

按如下方式使用它：

var controller = TextEditingController();

@override
  Widget build(BuildContext context)
  {
    return Form(
      key: GlobalKey(),
      child: Column(
        children: <Widget>[
          TextFormField(
            controller: controller,
            // The validator receives the text that the user has entered.
            validator: (value)
            {
              if (value == null || value.isEmpty)
              {
                return 'Please enter some text';
              }
              return null;
            },
          ),


          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
              String currentText = controller.text;
              // ...do something with currentText
            }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }

Answer 2

您可以使用TextEditingController並將其傳遞給TextFormField的controller參數。 您可以從controller獲取使用給出的value或輸入。

例子

  // Controller
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            // Add the controller to the TextFormField
            controller: _controller,
            // The validator receives the text that the user has entered.
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              // if (_formKey.currentState!.validate()) {
              //    ....
              // }

              // This gives the value
              final String value = _controller.text;
              print(value);
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }