在颤振中从可利用域获取输入

Question

我已经创建了可重用的文本字段和按钮，只要我想使用它们，我就会简单地调用它们。例如，在我的登录页面中，我正在调用

          InputBox(Text:'Username'),
          SizedBox(height: 40,),
          InputBox(Text:'Password'),
          SizedBox(height: 40,),
          AuthButton(text:'Sign In'),

同样地，在登记页上：

              InputBox(Text:'Name'),
              SizedBox(height: 40,),
              InputBox(Text:'Username'),
              SizedBox(height: 40,),
              InputBox(Text:'Password'),
              SizedBox(height: 40,),
              AuthButton(text:'Sign up'),

创建一个简单的登录表单，以便我也可以在我的注册页面中重用这个表单。我已经创建了一个模型fi;e，在这里，所有用于textfi亲自和按钮的模型都被存储起来。模式是：

import 'package:flutter/material.dart';
class InputBox extends StatelessWidget {
  String Text;
  InputBox({this.Text});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(10,2,10,2),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border.all(color: Colors.red)
      ),
      child: TextField(
        decoration: InputDecoration(
          border: InputBorder.none,
          labelText: Text,
        ),
        onChanged: (v){
         print("hello");
        },
      ),
    );
  }
}

class AuthButton extends StatelessWidget {
  String text;
  AuthButton({this.text});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(10,2,10,2),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: Colors.red)
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16,vertical: 8),
        child: Text(text,style: TextStyle(color:Colors.red,fontWeight: FontWeight.bold ),),
      ),
    );
  }
}

但是现在我想从登录页面和注册页面获得输入，我尝试了我所能做的一切，以便在它们各自的页面上获得结果(登录页面上的登录详细信息，注册页面上的注册细节)。知道怎么做吗。提前感谢

Answer 1

 TextEditingController emailController = new TextEditingController();
 TextEditingController passwordController = new TextEditingController();

            InputBox(
              Text: "Email",
              textEditingController: emailController,
            ),
            InputBox(
              Text: "Password",
              textEditingController: passwordController,
            ),

现在，您可以在onTab事件或onpress事件上调用Textfield值，如下所示

            MaterialButton(
              onPressed: () {
                print("Email:${emailController.text}"); 
                print("Password:${passwordController.text}");
              },
              color: Colors.red,
              splashColor: Colors.white,
              elevation: 2,
              child: Text(
                "buttonName",
              ),
            )

class InputBox extends StatelessWidget {

String Text;

TextEditingController textEditingController;
InputBox({this.Text, this.textEditingController});
@override
Widget build(BuildContext context) {
return Container(
  padding: EdgeInsets.fromLTRB(10, 2, 10, 2),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(5),
      border: Border.all(color: Colors.red)),
  child: TextField(
    controller: textEditingController,
    decoration: InputDecoration(
      border: InputBorder.none,
      labelText: Text,
    ),
    onChanged: (v) {
      print("On change <ethod:${textEditingController.text}");
     },
   ),
  );
 }
}

Answer 2

使用TextEditingController。在父组件上启动TextEditingController，并将其作为InputBox小部件的输入参数。

class InputBox extends StatelessWidget {
  String Text;
  TextEditingController controller; // initiate as a input property.
  InputBox({this.Text, this.controller});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(10,2,10,2),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          border: Border.all(color: Colors.red)
      ),
      child: TextFormField(
        controller: controller, //add controller to text field.
        decoration: InputDecoration(
          border: InputBorder.none,
          labelText: Text,
        ),
        onChanged: (v){
         print("hello");
        },
      ),
    );
  }
}

在父部件上，您可以定义这样的变量。

final _inputCtrl = TextEditingController();

...
Container(chlid:InputBox(controller:_inputCtrl, text:'hello')

可以使用_inputCtrl.value.text getter获取输入框中输入的值。