Flutter TextFormField onSave() 被调用为空值

Question

我想做一个 Custom TextFormField，所以我在需要时调用它，但是 onSave() 中的 valuedata 属性在将数据传递给它后一直为空。这是自定义 TextFormField：

class CustomTextField extends StatelessWidget {
  CustomTextField({
    Key? key,
    required this.labelText,
    required this.textInputType,
    required this.message,
    required this.valuedata,
  }) : super(key: key);

  final String labelText;
  final TextInputType textInputType;
  final String message;
  String valuedata;
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      onSaved: (value) {
        valuedata = value!;
      },
      keyboardType: textInputType,
      decoration: InputDecoration(
          labelStyle: const TextStyle(
            color: Colors.green,
          ),
          labelText: labelText,
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.green, width: 2.0),
            borderRadius: BorderRadius.circular(8.0),
          )),
      validator: (text) {
        if (text!.isEmpty) {
          return message;
        } else {
          return null;
        }
      },
    );
  }
}

这里是我使用它的地方：

 CustomTextField(
                      valuedata: input.input1,
                      labelText: 'name',
                      message: 'Please enter your name',
                      textInputType: TextInputType.text,
                    ),

这是我使用 CustomTextField 的完整代码：

class Apply extends StatefulWidget {
  const Apply({Key? key}) : super(key: key);

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

class Data {
  String input1 = '';
  String input2 = '';
}

class _ApplyState extends State<Apply> {
  var formKey = GlobalKey<FormState>();
  static Data input = Data();
  var input1 = '';
  var input2 = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Theme(
          data: ThemeData(primaryColor: Colors.green),
          child: Form(
            key: formKey,
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      "Les informations Personneles:",
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    CustomTextField(
                      valuedata: input.input1,
                      //data: data,
                      labelText: 'Prenom',
                      message: 'Please enter your name',
                      textInputType: TextInputType.text,
                    ),
                    const SizedBox(
                      height: 16,
                    ),
                    CustomTextField(
                      valuedata: input.input2,
                      labelText: 'Prenom',
                      message: 'Please enter your name',
                      textInputType: TextInputType.text,

                      //d,
                    ),
                    Row(
                      children: [
                        Expanded(
                            child: ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                  primary: Colors.red,
                                ),
                                onPressed: () {
                                  formKey.currentState!.reset();
                                  input1 = '';
                                  input2 = '';
                                  setState(() {});
                                },
                                child: const Text('Clear'))),
                        const SizedBox(
                          width: 16,
                        ),
                        Expanded(
                            child: ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                  primary: Colors.green,
                                ),
                                onPressed: () {
                                  if (formKey.currentState!.validate()) {
                                    formKey.currentState!.save();

                                    setState(() {});
                                  }
                                },
                                child: const Text('show'))),
                      ],
                    ),
                    const SizedBox(
                      height: 16,
                    ),
                    Text('Input1: ${input.input1}'),
                    Text('Input2: ${input.input1}'),
                    const SizedBox(
                      height: 16,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

如果您引用图像 input1 和 input2 未获得用户输入。我的问题是，使用相同的方法如何使 onSave() 保存状态值？

Answer 1

这就是您要找的东西

class Apply extends StatefulWidget {
const Apply({Key? key}) : super(key: key);

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

class Data {
  List<String> inputs = ['',''];
}

class _ApplyState extends State<Apply> {
  var formKey = GlobalKey<FormState>();
  static Data input = Data();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Theme(
          data: ThemeData(primaryColor: Colors.green),
          child: Form(
            key: formKey,
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      "Les informations Personneles:",
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    createTextField('label1', TextInputType.datetime, 'msg', 0),
                    createTextField('label2', TextInputType.datetime, 'msg', 1),
                    Row(
                      children: [
                        Expanded(
                            child: ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                  primary: Colors.red,
                                ),
                                onPressed: () {
                                  formKey.currentState!.reset();
                                  //input1 = '';
                                  //input2 = '';
                                  setState(() {});
                                },
                                child: const Text('Clear'))),
                        const SizedBox(
                          width: 16,
                        ),
                        Expanded(
                            child: ElevatedButton(
                                style: ElevatedButton.styleFrom(
                                  primary: Colors.green,
                                ),
                                onPressed: () {
                                  if (formKey.currentState!.validate()) {
                                    formKey.currentState!.save();

                                    setState(() {});
                                  }
                                },
                                child: const Text('show'))),
                      ],
                    ),
                    const SizedBox(
                      height: 16,
                    ),
                    Text('Input1: ${input.inputs[0]}'),
                    Text('Input2: ${input.inputs[1]}'),
                    const SizedBox(
                      height: 16,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
  createTextField(String labelText, TextInputType textInputType, String message, int index) => TextFormField(
      onSaved: (value) {
        setState(() {
          input.inputs[index] = value!;
        });
      },
      keyboardType: textInputType,
      decoration: InputDecoration(
          labelStyle: const TextStyle(
            color: Colors.green,
          ),
          labelText: labelText,
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
          focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.green, width: 2.0),
            borderRadius: BorderRadius.circular(8.0),
          )),
      validator: (text) {
        if (text!.isEmpty) {
          return message;
        } else {
          return null;
        }
      },
    );
}

Flutter TextFormField onSave() 被调用为空值

Flutter TextFormField onSave() get called with empty values

flutter

dart

flutter-textformfield