颤振:关闭软键盘后如何维护文本字段值

Question

有一个简单的结构，其中包含一个底部模态表，其中包含一个输入文本字段，用于将文本添加到列表中，以及一个按钮来提交值。

当文本字段获得焦点时，它会自动打开覆盖提交按钮的软键盘。 当我关闭键盘以按下按钮时，文本字段中的值仍然可见，但发送的值为 null。 如果我按下按钮而不关闭键盘，则值已正确发送。

问题是：如何关闭键盘并在按下提交按钮后仍然能够发送键入的值？

这是代码：

1( 在主屏幕上，浮动操作按钮显示模态底部表。

return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => AddTaskScreen(),               
},

2( 在 AddTaskScreen 类上，有一个 Column，其中包含容器内模态底表的内容。

Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Add your next Task',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: 20,
fontWeight: FontWeight.w400,
),
),
TextField(
textAlign: TextAlign.center,
autofocus: true,
onChanged: (value) {
newTaskTitle = value;
},
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'ADD',
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
),
color: Colors.lightBlueAccent,
onPressed: () {
print(newTaskTitle);
},
),
],
),
),

在此简化版本中，按下按钮时，文本字段中的值将打印在控制台中。如果我按下按钮而不隐藏键盘，它可以正常工作;如果我隐藏键盘，它会传递一个空值。

提前感谢您的帮助。

Answer 1

我遇到了同样的问题，我通过简单地将调用的类转换为扩展StatefullWidget而不是StatelessWidget来解决它。

在您的情况下，转换类AddTaskScreen()以扩展StatefullWidget。

Answer 2

好的，最简单的方法是向子类提供 TextEditorController。

因此，对于您的情况，您可以先在父类中创建 TextEditController，然后将其传递给子类。在子类的 TextField 中设置控制器：您传递的控制器

Parent Class.....
//// other codes ////
TextEditingController textEditingController = TextEditingController();
return Scafold{
FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => AddTaskScreen(textEditingController),               
},
};

而在儿童班

class ChildClass extends StatelessWidget(
final TextEditingController textEditingController;
ChildClass({this.textEditingController});
///then inside build method///
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Add your next Task',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.lightBlueAccent,
fontSize: 20,
fontWeight: FontWeight.w400,
),
),
TextField(
textAlign: TextAlign.center,
autofocus: true,
controller: textEditingController, /// here add the controller
onChanged: (value) {
newTaskTitle = value;
},
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'ADD',
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
),
color: Colors.lightBlueAccent,
onPressed: () {
print(newTaskTitle);
},
),
],
),
),

现在，您可以通过简单地从这两个类之间的任何位置调用textEditController.value.text来访问TextField中编写的内容。

Answer 3

只是移动文本控制器的声明对我有用。

....    
class _AddPlaceScreenState extends State<AddPlaceScreen> {
final controllerTittlePlace = TextEditingController();
final controllerDescriptionPlace = TextEditingController();
final controllerLocationPlace = TextEditingController();
....