颤动的多行文本字段

Question

这可能听起来很简单但是:我们怎样才能在一个多线可编辑的文本字段中颤动？TextField仅适用于单行.

编辑:一些精确因为看起来不太清楚.虽然您可以设置多行来虚拟包装文本内容,但它仍然不是多行的.它是一行显示为多行.如果你想做点什么

喜欢

这个.

那么你不能.因为您无权访问"输入"按钮.没有输入按钮,没有多行.

Answer 1

要使用自动换行,只需将maxLines设置为null:

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

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

Answer 2

自2017年9月起,添加了枚举值以支持多行文本编辑.

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

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

尽管其他人已经提到可以使用键盘类型“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 5

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

maxLines: null,

如果不起作用，请注意您必须删除它：

textInputAction: TextInputAction.next

它禁用键盘中的多行属性操作..

Answer 6

   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 7

使用expands并且您不需要提供minLines或maxLines任何特定值：

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

Answer 8

虽然这个问题相当古老，但没有广泛的答案来解释如何以TextField很少的开发人员努力动态调整大小。当 将TextField放置在 ListView、SingleChildScrollView 等 flexbox 中时，这一点尤其重要（flexbox 将无法确定 expandable 的固有大小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类中以向TextField其父级提供动态计算的可扩展的固有高度（当通过例如 flexbox 请求时）。

Answer 9

这段代码对我有用，而且我还可以在网络和移动设备上使用 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,
            ),
          ),
        ),
      )
    ]);
  }

Answer 10

用这个

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

Answer 11

使用Expanded小部件带来动态感觉

Expanded(
            child: TextField(
              keyboardType: TextInputType.multiline,
              minLines: 1,
              maxLines: 3,
            ),
          )

Answer 12

TextField有maxLines属性。