Question

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

我尝试将maxLines增加到一个很大的数字，这导致使用“浮动操作按钮”出现像素溢出错误。
我尝试将其包装在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

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

Expanded() 小部件对您有帮助

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

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

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

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

InputDecoration.collapsed()

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

Answer 2

现在，您可以使用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 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..."
            ),
  );}); }

如何在Flutter中创建全屏TextField

3 个答案: