颤振中的多行文本场

Question

这听起来可能很容易，但是我们如何在颤振中做多行可编辑的文本字段？文本字段只适用于单行。

编辑：有些精度，因为它似乎不清楚。虽然可以将“多行”设置为虚拟包装文本内容，但它仍然不是多行。它是一行显示为多行。如果你想做这样的事情，你就不能。因为你没有权限进入ENTER按钮。没有回车键意味着没有多行。

Answer 1

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

为此，每次文本更改时，我都在分析输入中“\n”聊天者的数量。这似乎是一种过度杀戮，但不幸的是，到目前为止，我没有找到更好的可能性在Flutter中实现这种beahivour，即使在旧的智能手机上，我也没有注意到任何性能问题。

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 2

如果希望文本字段适应用户输入，请执行以下操作：

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

在这里将最大线设置为您想要的任何内容，您就可以开始了。在我看来，将最大线设置为null不是一个好的选择，我们应该将其设置为一些值。

Answer 3

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

dart prettyprint-override">TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
)

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