用TextField填充行？答案

【问题标题】：Fill row with TextField?用TextField填充行？
【发布时间】：2019-01-19 16:53:51
【问题描述】：

我正在测试 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才不会出现这个问题？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

我认为原因是

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

如果您将其更改为，您的问题应该会得到解决

InputDecoration(hintText: "Send a message")

编辑：当您删除折叠的构造函数时，您必须像这样明确地将边框设置为无，以便没有下划线

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中终于有一个open issue与这个问题相关

Allow multiline TextField to expand vertically to fit container #21943

【讨论】：

感谢您的回复！我已经测试过你的答案，但它只适用于 TextField 的底部。它仍然没有拉伸 TextField 以覆盖顶部边框。尝试点击消息区域顶部分隔线下方。它不会触发 TextField。
@FlutterFirebase 更新了答案以获得更多说明
谢谢！我明白。所以问题是文本字段没有垂直扩展。但是为什么展开到底部或向边没有问题呢？
横向扩展不是文本字段的问题。但在垂直方向上，它似乎与行数有关。我不明白你说的底部是什么意思。如果您更改行的背景颜色，您可以看到底部也有相等的空间。
我认为底部没有空间。我没有注意到底部也有空间。在消息区只通知顶部。