如何在Flutter中创建全屏幕TextField

Question

我正在尝试构建一个聊天应用程序，其中“新消息”屏幕包含收件人和消息。我希望文本字段填满屏幕上的剩余空间，就像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 键向下移动，但这看起来不够清晰，而且在该区域内无法滚动。

希望有人能帮我扩展到整个屏幕。

最好的问候，Alex！

- afcode

---

尝试使用ListView小部件替换Column小部件。 - Vicky Salunkhe

Answer 1

如果你正在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()

注意：我本来希望把这个作为对原问题的评论，但由于声望不足而无法这样做。

- Manish Paul

Answer 2

目前您可以使用maxline 99999，因为如果我们在maxline中传递double.infinity.toInt()来实现无限行，flutter已经存在一个未解决的问题。

因此，要创建带有滚动功能的多行文本视图，您可以使用maxline 99999和SingleChildScrollView小部件，如下所示。它将允许您滚动并设置最大行数。

如果使用以下示例，则它将适合屏幕大小：

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,
    );

- android

---

正如我之前提到的，我已经尝试增加 maxLines:。我更正了我的问题，使其更具体：当我使用 maxLines 和一个大数字时，底部会出现像素溢出，而 FAB 就在那里。 - afcode

尝试使用我的代码，它不会给你像素溢出问题，如果仍然存在问题，你可以在脚手架中使用"resizeToAvoidBottomPadding: true"。 - android

使用 resizeToAvoidBottomPadding: true 修复了我的浮动操作按钮问题。谢谢 :) - afcode

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..."
            ),
  );}); }

- Vicky Salunkhe

---

正如我之前提到的，我已经尝试增加 maxLines:。我更正了我的问题，使其更具体：当我使用 maxLines 和一个很大的数字时，底部会出现像素溢出，而 FAB 就在那里。 - afcode