无法使用颤振形式的重置方法清除文本字段
Posted
技术标签:
【中文标题】无法使用颤振形式的重置方法清除文本字段【英文标题】：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(),
),
],
)
],
),
);
【问题讨论】：
【参考方案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，以便重置对它们起作用。
【讨论】：
以上是关于无法使用颤振形式的重置方法清除文本字段的主要内容，如果未能解决你的问题，请参考以下文章