颤动中的多行文本字段答案

【问题标题】：Multi-line Textfield in flutter颤动中的多行文本字段
【发布时间】：2018-02-04 14:59:42
【问题描述】：

这听起来很简单，但是我们如何在 Flutter 中创建多行可编辑文本字段？ TextField 仅适用于单行。

编辑：一些精确度，因为似乎不清楚。虽然您可以设置多行以虚拟包装文本内容，但它仍然不是多行。它是显示为多行的单行。如果你想做这样的事情，那么你不能。因为您无权访问ENTER 按钮。而且没有回车键意味着没有多行。

【问题讨论】：

标签： dart flutter

【解决方案1】：

TextField 具有 maxLines 属性。

【讨论】：

我知道。虽然它包装了内容，但您仍然无法按 Enter 手动创建新行。至少在 android 上，因为您无法访问回车按钮。
啊，我错过了那个问题。我在 2016 年看到了一个类似的问题，所以我认为它已经解决了。很遗憾我们仍然做不到。
现在看来这个问题已经修复了 (github.com/flutter/flutter/issues/8028)。我在 iOS 和 Android 上都尝试了多行，现在两者都可以在文本字段中创建新行。
现在实际上可以新建一行了，但是必须按两次回车键！

【解决方案2】：

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

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

如果maxLines属性为null，则不限制行数，并启用换行。

【讨论】：

关键是要有maxLines: null。没有你好，它似乎不起作用
如果你想让它看起来像 HTML 中的<textarea> 更厚，请使用minLines: 4
如果我想为最大第 5 行提供输入怎么办？
文本现在很好地换行，但不再在 Enter 上提交。它只是转到文本字段中的新行。我错过了什么吗？我在一个安卓模拟器上。
不推荐使用此答案，因为 null 安全性会阻止将 null 分配给属性。

【解决方案3】：

使用这个

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

【讨论】：

【解决方案4】：

Official doc states: 可以将maxLines 属性设置为 null 以消除对行数的限制。 默认情况下是一个，这意味着这是一个单行文本字段。

注意：maxLines 不能为零。

【讨论】：

【解决方案5】：

如果上述方法对您不起作用，请尝试添加 minLines

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

【讨论】：

【解决方案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,
  )

【讨论】：

考虑添加实际使用 _inputHeight 设置输入高度的方式
由于 TextField 可以换行而不用 '\n' 拆分行计数会失败。所以我用这段代码计算文本行： int count = (_textEditingController.text.length / (MediaQuery.of(context).size.width * 0.06) ).round() ;

【解决方案7】：

如果您希望您的 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 并不是一个好的选择，我们应该将其设置为某个值。

【讨论】：

我已将小部件名称从：TextInputField 更正为：TextField。在flutter中没有TextInputField，只有TextField或TextFormField。除非您使用自定义名称创建一个。
在您的示例中，默认显示 5 行。我只想看到 1 行。如果您想添加更多数据，那么他/她可以按 Enter。

【解决方案8】：

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

textInputAction: TextInputAction.newline,

【讨论】：

【解决方案9】：

使用expands，你不需要给minLines或maxLines任何具体值：

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

根据许多其他用户的建议，像这样构建您的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 请求时）。

【讨论】：

textInputAction: TextInputAction.newline, - 正在寻找这个，它使输入新行，谢谢

【解决方案13】：

为动态感觉使用扩展小部件

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

【讨论】：

【解决方案14】：

此代码对我有用，我也可以将 ENTER 用于网络和移动设备。

@override
  Widget build(BuildContext context) {
      double width = MediaQuery.of(context).size.width;
      double height = MediaQuery.of(context).size.height;
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start, 
      children: [
      Container(
        child: ConstrainedBox(
          //  fit: FlexFit.loose,
          constraints:  BoxConstraints(
            maxHeight: height,//when it reach the max it will use scroll
            maxWidth: width,
          ),
          child: const TextField(
            keyboardType: TextInputType.multiline,
            maxLines: null,
            minLines: 1,
            decoration: InputDecoration(
              fillColor: Colors.blueAccent,
              filled: true,
              hintText: "Type  ",
              border: InputBorder.none,
            ),
          ),
        ),
      )
    ]);
  }

【讨论】：

【解决方案15】：

您必须在 TextField 小部件中使用这一行：

maxLines: null,

如果不起作用，请注意您必须删除它： textInputAction: TextInputAction.next 它在键盘中禁用多行属性操作..

【讨论】：