android Flutter:如何在关闭软键盘后保持TextField值

bsxbgnwa  于 2022-12-09  发布在  Android
关注(0)|答案(3)|浏览(261)

有一个简单的结构,它包含一个用于将文本添加到列表中的输入TextField和一个用于提交值的按钮。
当文本字段被聚焦时,它会自动打开覆盖提交按钮的软键盘。当我关闭键盘以按下按钮时,文本字段中的值仍然可见,但发送的值为空。如果我按下按钮而不关闭键盘,则值会正确发送。
问题是:我怎样才能关闭键盘并在按下提交按钮后仍能发送键入的值?
代码如下:
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);
            },
          ),
        ],
      ),
    ),

在这个简化的版本中,当按下按钮时,TextField的值会打印在控制台中。如果我隐藏键盘,它会传递一个空值。
提前感谢您的帮助。

zvokhttg

zvokhttg1#

我遇到了同样的问题,我通过简单地将被调用的类转换为扩展StatefullWidget而不是StatelessWidget来解决它。
在您的情况下,转换类AddTaskScreen()以扩展StatefullWidget

yftpprvb

yftpprvb2#

最简单的方法是为子类提供一个TextEditingController。
所以对于你的情况,你可以先在Parent Class中创建一个TextEditingController,然后把它传递给子类.并在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);
        },
      ),
    ],
  ),
),

现在,只需从这两个类之间的任意位置调用textEditingController.value.text,就可以访问写入TextField中的内容。

syqv5f0l

syqv5f0l3#

只要移动文本控制器的声明就可以了。

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

相关问题