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，其中存储了文本域和按钮的所有模型。模型是：

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 获取输入框中输入的值。

从颤振中的可重用字段获取输入

2 个答案: