Question

我正在测试Flutter UI codelab并发现问题。

在撰写邮件时，字段TextField不会扩展为填充Row。因此，当用户尝试点击消息区域时，TextField上方和下方都有空间，不会触发TextField。（因此没有打开的键盘）

尝试代码，然后在分隔线下点一下。它不会触发TextField：

Widget _buildTextComposer() {
  return new IconTheme(                                            //new
    data: new IconThemeData(color: Theme.of(context).accentColor), //new
    child: new Container(                                     //modified
      margin: const EdgeInsets.symmetric(horizontal: 8.0),
      child: new Row(
        children: <Widget>[
          new Flexible(
            child: new TextField(
              controller: _textController,
              onSubmitted: _handleSubmitted,
              decoration: new InputDecoration.collapsed(
                hintText: "Send a message"),
            ),
          ),
          new Container(
            margin: new EdgeInsets.symmetric(horizontal: 4.0),
            child: new IconButton(
              icon: new Icon(Icons.send),
              onPressed: () => _handleSubmitted(_textController.text)),
          ),
        ],
      ),
    ),                                                             //new
  );
}

如何展开TextField，以免出现此问题？

Answer 1

我认为原因是

InputDecoration.collapsed(hintText: "Send a message")

将问题更改为

应该可以解决您的问题

InputDecoration(hintText: "Send a message")

编辑：删除折叠的构造函数时，您必须像这样将border显式设置为none，以免出现下划线

InputDecoration(border: InputBorder.none)

编辑：此示例代码演示了结果；

Widget _buildTextComposer(BuildContext context) {
    return new IconTheme(
      //new
      data: new IconThemeData(color: Theme.of(context).accentColor), //new
      child: new Container(
        //modified
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        child: new Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Expanded(
              child: new TextField(
                controller: _textController,
                onSubmitted: (s) {},
                decoration:
                    new InputDecoration(
                      hintText: "Send a message", 
                      fillColor: Colors.green,
                      filled: true,
                      border: InputBorder.none),
              ),
            ),
            new Container(
              margin: new EdgeInsets.symmetric(horizontal: 4.0),
              child: new IconButton(
                  icon: new Icon(Icons.send),
                  onPressed: () {}),
            ),
          ],
        ),
      ), //new
    );
  }

此代码提供了以下结果：

顶部空间的原因是行的高度大于您的文本字段，不幸的是，在编写此文本字段时，这些文本字段并未垂直扩展，而是根据其最大行数来确定其高度。

最后在flutter github中有一个与此问题有关的未解决问题

Allow multiline TextField to expand vertically to fit container #21943

用TextField填充行？

1 个答案: