如何为可重用文本字段及其样式创建通用文本字段小部件？

Question

我最近开始学习Flutter，想知道如何编写代码来显示相同大小的框、文本样式、装饰的多个文本字段。我已经编写了代码，其中我对每个需要的新输入使用文本字段，而不是想要编写一个虚拟代码并在我想要文本字段的地方调用它并更改提示文本。假设我想在所有文本字段中使用这些结构，但不想使用不同的hintText再次编写整个代码

                          SizedBox(height: 20),
                          Container(
                            //Type TextField
                            width: width * 0.8,
                            height: height * 0.053,
                            color: fcolor,
                            child: TextField(
                              decoration: InputDecoration(
                                contentPadding: EdgeInsets.all(10.0),
                                enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white),
                                ),
                                hintText: 'Type',
                                hintStyle: TextStyle(color: tcolor),
                              ),
                              style: TextStyle(color: icolor),
                            ),
                          ),

Answer 1

您可以创建一个

Widget

并传递

hintText

和您想要的其他属性（作为参数），如下所示：

Widget _buildTextField({String hintText, // add other properties here}) { // new 
  return Container(
    //Type TextField
    width: width * 0.8,
    height: height * 0.053,
    color: fcolor,
    child: TextField(
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(10.0),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
        ),
        hintText: hintText, // pass the hint text parameter here
        hintStyle: TextStyle(color: tcolor),
      ),
      style: TextStyle(color: icolor),
    ),
  );
}

然后在

_buildTextField

或

StatelessWidget

中使用

StatefulWidget

方法，如下所示：

class StackOver extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          body: Column(
        children: [
          _buildTextField(hintText: 'First Name'),
          SizedBox(height: 20,),
          _buildTextField(hintText: 'Last Name'),
        ],
      ),
    );
  }
}

Answer 2

这样做，

创建一个返回小部件的函数（..textfield）

 Widget getTextField(String hintText){

                          return Container(
                            //Type TextField
                            width: width * 0.8,
                            height: height * 0.053,
                            color: fcolor,
                            child: TextField(
                              decoration: InputDecoration(
                                contentPadding: EdgeInsets.all(10.0),
                                enabledBorder: UnderlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white),
                                ),
                                hintText: hintText,
                                hintStyle: TextStyle(color: tcolor),
                              ),
                              style: TextStyle(color: icolor),
                            );

现在，无论您需要文本字段，都可以调用此方法并传递您的提示文本， 例如，

getTextField("this is hint text");

Answer 3

像这样声明通用文本字段小部件

class CsCommonTextFieldWidget extends StatefulWidget {
  const CsCommonTextFieldWidget(
      {this.titleText = '',
      this.titleTextAlign = TextAlign.center,
      required this.isPassword,
      required this.hintText,
      required this.textController});

  final String titleText;
  final TextAlign titleTextAlign;
  final bool isPassword;
  final String hintText;
  final TextEditingController textController;

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

class _CsCommonTextFieldWidgetState extends State<CsCommonTextFieldWidget> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      obscureText: widget.isPassword,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(10.0),
        hintText: widget.hintText, // pass the hint text parameter here
        hintStyle: TextStyle(color: Colors.black26),
      ),
      style: TextStyle(color: Colors.black),
    );
  }
}

使用方法

Container(
                width: double.infinity,
                margin: const EdgeInsets.fromLTRB(0, CsDimens.SPACE40, 0, 0),
                child: CsCommonTextFieldWidget(
                  isPassword: false,
                  hintText: Languages.of(context)!.labelEmail,
                  textController: emailController,
                ),
              ),