如何在 Flutter 中创建全屏 TextField

Question

我尝试构建一个聊天应用程序，其中“新消息”屏幕包含收件人和消息。我希望 TextField 填满屏幕上的剩余空间。就像 HTML 中的 Textarea。

1. 我试图将maxLines 增加到一个很大的数字，导致浮动操作按钮出现像素溢出 错误。
2. 我尝试将它包装在一个Expanded 小部件中，但它对它没有任何影响。

这是我当前的布局结构：

    body: new Column(
        children: <Widget>[
          new ListTile(
            dense: false,
            title: new Text("Alex XYZ",
                //...
          ),
          Divider(),
          new TextField(
              decoration: InputDecoration(hintText: "Insert your message",),
              scrollPadding: EdgeInsets.all(20.0),
              autofocus: true,
          )
        ],
      ),

使用上面代码中的 TextField，我什至不能写多行。如果我添加 maxLines: 2 我可以按 Enter 向下移动，但这看起来不干净，您不能在该区域滚动。

我希望有人可以帮助我了解如何将其扩展到整个屏幕。

最好的问候亚历克斯！

Answer 1

现在你可以使用 maxline 99999，因为如果我们通过了，flutter 中已经存在未解决的问题 maxline 中的 double.infinity.toInt() 用于无限行。

因此，要创建具有滚动功能的多行文本视图，您可以将 maxline 99999 与 SingleChildScrollView 一起使用 小部件如下。它将允许您滚动以及 maxline。

如果您使用以下示例，它也将适合屏幕：

return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(hintText: "Insert your message",),
                scrollPadding: EdgeInsets.all(20.0),
                keyboardType: TextInputType.multiline,
                maxLines: 99999,
                autofocus: true,)
            ],
          ),
        ),
      ),
      resizeToAvoidBottomPadding: true,
    );

Answer 2

任何在 2021 年 1 月及以后阅读本文的人...

Expanded() 小部件将帮助您

只需像这样用Expanded() 包裹你的TextField()...

Expanded(
    child: TextField(
              decoration: InputDecoration(hintText: "Insert your message",),
              scrollPadding: EdgeInsets.all(20.0),
              autofocus: true,
          )
)

这将考虑到剩余的屏幕并像对待巨人一样对待TextField()

另外，如果你想删除 TextField 的 下划线，我猜这对于这样的应用程序是必要的，使用 InputDecoration 类的 collapsed() 构造函数，像这样

InputDecoration.collapsed()

注意：我想将此作为对原始问题的评论添加，但由于声誉较低无法这样做。

Answer 3

您可以使用下面的函数，它会做的是，它最初会显示一个有 6 行的文本字段，然后当用户输入新内容时，最大行数可以达到无穷大。

Widget _postBodyTextField(){ return LayoutBuilder(
builder: (context, size){
  TextSpan text = new TextSpan(
    text: editTextController.text,
  );

  TextPainter tp = new TextPainter(
      text: text,
      textDirection: TextDirection.ltr,
      textAlign: TextAlign.left,
  );
  tp.layout(maxWidth: size.maxWidth);

  int lines = (tp.size.height / tp.preferredLineHeight).ceil();
  int maxLines = 6;

  return TextField(
    controller: editTextController,
    maxLines: lines > maxLines ? null : maxLines,
    textInputAction: TextInputAction.newline,
     decoration: InputDecoration(
              hintText: "Start Writing here..."
            ),
  );}); }