无法从 TextField 颤振中退出

Posted 2023-02-23

【中文标题】无法从 TextField 颤振中退出

【英文标题】：Can't exit from a TextField flutter

【发布时间】：2020-09-03 12:23:06

【问题描述】：

我需要一个 Box 来插入和存储用户输入的一些信息，我使用的是“TextField”，所以我将“TextField”中的“maxLines”选项从默认值 (1) 更改为 (2 )，当我想在此处插入一些文本时，我无法离开该框，因为“完成”按钮更改为“返回”阻止了我！键盘也被挡住了。 我这样做是因为我想要一个里面有一些文本（如描述）的 Box，我可以将它移动到我想要的位置并更改它的所有属性。 我的问题是文本字段全部写在一行中，我需要在文本字段的边界处换行。 你知道如何更好地处理 TextField 吗？ 这是代码的一部分：

Widget build(BuildContext context) 
return new Scaffold(
    backgroundColor: Colors.white,
    body : Container(
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          image: DecorationImage(
            image: _image == null
                ? AssetImage('assets/images/io.png')
                : FileImage(_image),  // here add your image file path,
          alignment: Alignment.topCenter,
          ),
         ),
      child: GestureDetector(
        child:Container(
          alignment: Alignment.center,
          child : ConstrainedBox(
             constraints: BoxConstraints(
               maxHeight: 400,
               maxWidth: 400,
                ),
              child: TextField(
                minLines: 1,
                 maxLines: 2,
                decoration: InputDecoration(
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                       const Radius.circular(48.0)
                    ),
                  ),
                labelText: 'Descrizione',
                labelStyle: TextStyle(
                   backgroundColor: Colors.white,
                  ),
                ),
              ),
          ),
        ),
      )
    )
);

P.S.：我正在研究这个“GestureDetector”，我想它应该对这个目的有用。

【参考方案1】：

在TextField 中进入InputDecoration 并在后缀属性中添加一个Widget。 suffix 属性是一个 Widget，显示在 Textfield 的末尾。

FocusNode node = FocusNode();


TextField(
                minLines: 1,
                maxLines: 2,
                focusNode: node,
                decoration: InputDecoration(
                  suffix: RaisedButton(
                    onPressed: () 
                      node.unfocus();
                    ,
                    child: Text("Done"),
                  ),
                  border: OutlineInputBorder(
                    borderRadius:
                        BorderRadius.all(const Radius.circular(48.0)),
                  ),
                  labelText: 'Descrizione',
                  labelStyle: TextStyle(
                    backgroundColor: Colors.white,
                  ),
                ),
              ),