Question

这可能听起来很容易但是：我们如何在颤动中进行多行可编辑文本字段？ TextField仅适用于单行。

编辑：一些精确因素，因为它似乎并不清楚。虽然您可以设置多行来虚拟包装文本内容，但它仍然不是多行的。它是一行显示为多行。如果你想做某事

像

此。

然后你就不能了。因为您无法访问＆＃39;输入＆＃39;按钮。没有输入按钮，没有多行。

Answer 1

自2017年9月起，我们添加了一个枚举值，以支持多行文字编辑。

new TextField(
  keyboardType: TextInputType.multiline,
  maxLines: whatever,
)

Answer 2

要使用自动换行，只需将maxLines设置为null：

new TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
)

如果maxLines属性为null，则行数没有限制，并且启用了换行。

Answer 3

如果您希望TextField适应用户输入，请执行以下操作：

TextField(
    keyboardType: TextInputType.multiline,
    minLines: 1,//Normal textInputField will be displayed
    maxLines: 5,// when user presses enter it will adapt to it
    );

在此处将最大行数设置为您想要的任何值，您就可以开始了。我认为将maxlines设置为null不是一个好选择，我们应该将其设置为某个值。

Answer 4

使用expands，而无需为minLines或maxLines提供任何特定的值：

TextField(
  maxLines: null,
  expands: true, 
  keyboardType: TextInputType.multiline,
)

Answer 5

虽然这个问题相当古老，但没有广泛的答案来解释如何以很少的开发人员努力动态调整 TextField 的大小。当 TextField 被放置在 ListView、SingleChildScrollView 等 flexbox 中时，这一点尤其重要（flexbox 将无法确定可展开 TextField 的固有大小）。< /p>

按照许多其他用户的建议，像这样构建您的 TextField：

TextField(
  textInputAction: TextInputAction.newline,
  keyboardType: TextInputType.multiline,
  minLines: null,
  maxLines: null,  // If this is null, there is no limit to the number of lines, and the text container will start with enough vertical space for one line and automatically grow to accommodate additional lines as they are entered.
  expands: true,  // If set to true and wrapped in a parent widget like [Expanded] or [SizedBox], the input will expand to fill the parent.
)

如何应对 TextField 缺失的内在高度？

将 TextField 包裹在 IntrinsicHeight class 中，以将动态计算的可展开 TextField 的固有高度提供给其父级（当通过例如 flexbox 请求时）。

Answer 6

尽管其他人已经提到可以使用键盘类型“ TextInputType.multiline”，但我还是想添加TextField的实现，该实现在输入新行时会自动调整其高度，因为通常需要模仿WhatsApp和类似应用程序的输入行为。

为此，每次文本更改时，我正在分析输入中“ \ n”个字符的数量。这似乎是一个过大的杀伤力，但不幸的是，到目前为止，我没有找到更好的方法来实现Flutter的这种性能，即使在较旧的智能手机上，我也没有发现任何性能问题。

class _MyScreenState extends State<MyScreen> {
  double _inputHeight = 50;
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _textEditingController.addListener(_checkInputHeight);
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }

  void _checkInputHeight() async {
    int count = _textEditingController.text.split('\n').length;

    if (count == 0 && _inputHeight == 50.0) {
      return;
    }
    if (count <= 5) {  // use a maximum height of 6 rows 
    // height values can be adapted based on the font size
      var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
      setState(() {
        _inputHeight = newHeight;
      });
    }
  }


  // ... build method here
  TextField(
    controller: _textEditingController,
    textInputAction: TextInputAction.newline,
    keyboardType: TextInputType.multiline,
    maxLines: null,
  )

Answer 7

TextField有maxLines属性。

Answer 8

指定TextInputAction.newline，使TextField响应输入键，并接受多行输入：

textInputAction: TextInputAction.newline,

Answer 9

   TextFormField(
                  minLines: 2,
                  maxLines: 5,
                  keyboardType: TextInputType.multiline,
                  decoration: InputDecoration(
                    hintText: 'description',
                    hintStyle: TextStyle(
                      color: Colors.grey
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(20.0)),
                    ),
                  ),
                ),

Answer 10

使用此

TextFormField(
      keyboardType: TextInputType.multiline,
      maxLines: //Number_of_lines(int),)

Answer 11

Official doc states：可以将maxLines属性设置为null以消除对行数的限制。 默认情况下，该字段为1，表示这是单行文本字段。

注意： maxLines不能为零。

Answer 12

如果上述方法一次都不适合您，请尝试同时添加 minLines

TextField(
        keyboardType: TextInputType.multiline,
        minLines: 3,
        maxLines: null);

Answer 13

对于TextFormField widget，如果要设置固定行数，则可以设置minLines和maxLines。否则，您也可以将maxLines设置为null。

TextFormField(
      minLines: 5,
      maxLines: 7,
      decoration: InputDecoration(
          hintText: 'Address',
          border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
      ),
),

Answer 14

使用扩展小部件以获得动态感觉

扩展( 孩子：文本字段（键盘类型：TextInputType.multiline，最小线数：1，最大线数：3， ), )

颤动的多行文本字段

14 个答案: