无法使用颤振形式的重置方法清除文本字段答案

【问题标题】：Not able to clear text fields using reset method in flutter form无法使用颤振形式的重置方法清除文本字段
【发布时间】：2021-12-30 00:17:52
【问题描述】：

我正在用 Flutter 设计一个表单，它使用 TextField 小部件为两个文本字段输入输入，一个使用 DateTimeField 的时间字段和一个使用 WeekDay 选择器小部件的日期选择器。我已经使用 reset 方法重置了表单，但这只是重置 BasicTimeField 小部件，无法重置所有其他字段。

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

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    var ht = MediaQuery.of(context).size.height;
    var wd = MediaQuery.of(context).size.width;
    return Form(
      key: formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: ht / 20,
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: wd / 40, vertical: 1),
            child: Text(
              "Subject",
              style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
            ),
          ),
          Padding(
            padding:
                EdgeInsets.symmetric(horizontal: wd / 40, vertical: ht / 60),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(), // UnderlineInputBorder(),
                hintText: 'Type Subject name here',
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: wd / 40, vertical: 1),
            child: Text(
              "Class Link",
              style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
            ),
          ),
          Padding(
            padding:
                EdgeInsets.symmetric(horizontal: wd / 40, vertical: ht / 60),
            child: const TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(), // UnderlineInputBorder(),
                hintText: 'Paste class link here',
              ),
            ),
          ),
          Center(
              child: Text(
            "Timing",
            style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
          )),
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            BasicTimeField(),
            SizedBox(
              width: wd / 9,
              child: Center(
                child: Text(
                  "to",
                  style:
                      TextStyle(fontSize: ht / 40, fontWeight: FontWeight.w400),
                ),
              ),
            ),
            BasicTimeField()
          ]),
          SizedBox(
            height: ht / 40,
          ),
          Center(
              child: Text(
            "Select days of week",
            style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
          )),
          DayPicker(),
          SizedBox(
            height: ht / 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: Text('Add'),
                onPressed: () => formKey.currentState?.save(),
              ),
              const SizedBox(
                width: 50,
              ),
              ElevatedButton(
                child: Text('Reset'),
                onPressed: () => formKey.currentState?.reset(),
              ),
            ],
          )
        ],
      ),
    );
  }
}

【问题讨论】：

标签： forms flutter textfield flutter-widget flutter-form-builder

【解决方案1】：

表单中的重置不起作用，因为您使用的文本字段在使用时不会重置

formKey.currentState?.reset()

尝试将 Textform 更改为 TextFormField

现在，它可以工作了。

完整更新的代码（来自您的代码）


import 'package:flutter/material.dart';

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

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    var ht = MediaQuery.of(context).size.height;
    var wd = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Form(
        key: formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: ht / 20,
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: wd / 40, vertical: 1),
              child: Text(
                "Subject",
                style:
                    TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
              ),
            ),
            Padding(
              padding:
                  EdgeInsets.symmetric(horizontal: wd / 40, vertical: ht / 60),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(), // UnderlineInputBorder(),
                  hintText: 'Type Subject name here',
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: wd / 40, vertical: 1),
              child: Text(
                "Class Link",
                style:
                    TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
              ),
            ),
            Padding(
              padding:
                  EdgeInsets.symmetric(horizontal: wd / 40, vertical: ht / 60),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(), // UnderlineInputBorder(),
                  hintText: 'Paste class link here',
                ),
              ),
            ),
            Center(
                child: Text(
              "Timing",
              style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
            )),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              // BasicTimeField(),
              SizedBox(
                width: wd / 9,
                child: Center(
                  child: Text(
                    "to",
                    style: TextStyle(
                        fontSize: ht / 40, fontWeight: FontWeight.w400),
                  ),
                ),
              ),
              // BasicTimeField()
            ]),
            SizedBox(
              height: ht / 40,
            ),
            Center(
                child: Text(
              "Select days of week",
              style: TextStyle(fontSize: ht / 30, fontWeight: FontWeight.w500),
            )),
            // DayPicker(),
            SizedBox(
              height: ht / 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  child: Text('Add'),
                  onPressed: () => formKey.currentState?.save(),
                ),
                const SizedBox(
                  width: 50,
                ),
                ElevatedButton(
                  child: Text('Reset'),
                  onPressed: () => formKey.currentState?.reset(),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

输出

输入数据

按下复位后清除

【讨论】：

【解决方案2】：

formKey.currentState?.reset()

这行代码重置了所有作为 Form() 后代的表单字段。它仅适用于 TextFormField 小部件。

您可以将所有 TextField 小部件更改为 TextFormField，以便重置对它们起作用。

【讨论】：