这可能听起来容易,但我们如何能做一个多行可编辑的文本域颤振?TextField只与单行工作。

编辑:一些精确度,因为看起来不清楚。 虽然您可以将multiline设置为虚拟换行文本内容,但它仍然不是多行。它是一行显示成多行。 如果你想做这样的事,那就不行。因为你没有回车键。没有回车键就没有多路线路。


TextField有maxLines属性。


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

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

如果maxLines属性为空,则没有行数限制,并且启用换行。


使用这个

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

官方文件指出: maxLines属性可以设置为null,以消除对行数的限制。默认情况下,它是1,这意味着这是一个单行文本字段。

注意:maxLines不能为零。


如果以上没有为您工作,然后尝试添加minLines也

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

虽然其他人已经提到键盘类型“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,
  )

如果你想要你的TextField是适应用户输入,然后这样做:

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

在这里,你可以将Max行设置为任何你想要的,你就可以开始了。 在我看来,将maxlines设置为null不是一个好的选择,这就是为什么我们应该将它设置为一些值。


指定TextInputAction。newline使TextField响应enter键并接受多行输入:

textInputAction: TextInputAction.newline,

1. 固定高度:

(A)基于线条:

TextField(
  minLines: 3, // Set this
  maxLines: 6, // and this
  keyboardType: TextInputType.multiline,
)

(B)根据高度:

SizedBox(
  height: 200, //     <-- TextField expands to this height. 
  child: TextField(
    maxLines: null, // Set this 
    expands: true, // and this
    keyboardType: TextInputType.multiline,
  ),
)

2. 灵活的高度:

使用列和包装TextField在扩展:

Column(
  children: [
    Expanded(
      child: TextField(
        maxLines: null, // Set this 
        expands: true, // and this
        keyboardType: TextInputType.multiline,
      ),
    ),
  ],
)

(可选)布景装饰:

你可以看到这个装饰的任何上述TextField:

decoration: InputDecoration(
  hintText: 'Write a message',
  filled: true,
)

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

虽然这个问题是相当老的,没有广泛的答案,解释如何动态调整TextField与很少的开发人员的努力。这是特别重要的,当TextField是放在一个flexbox,如ListView, SingleChildScrollView等(flexbox将无法确定一个可扩展的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包装在一个intrinsic height类中,以提供动态计算的可扩展TextField的内在高度给它的父类(当通过例如flexbox请求时)。


使用扩展小部件进行动态感觉

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

这段代码为我工作,我也能够使用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,
            ),
          ),
        ),
      )
    ]);
  }


你必须在TextField小部件中使用这一行:

maxLines: null,

如果没有工作,请注意,你必须删除这个:

textInputAction: TextInputAction.next

它是禁用多行属性动作在键盘..


对于自动抓取,只使用空maxLines

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

or

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

使用这个

 Expanded(
        child: TextField(
          controller: textMessageController,
          keyboardType: TextInputType.multiline,
          textCapitalization: TextCapitalization.sentences,
          minLines: 1,
          maxLines: 3,
          onChanged: ((value) {
            setState(() {
              _messageEntrer = value;
            });
          }),
          decoration: InputDecoration(
            hintText: "Type your message here",
            hintMaxLines: 1,
            contentPadding:
                const EdgeInsets.symmetric(horizontal: 8.0, vertical: 10),
            hintStyle: TextStyle(
              fontSize: 16,
            ),
            fillColor: Colors.white,
            filled: true,
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(30.0),
              borderSide: const BorderSide(
                color: Colors.white,
                width: 0.2,
              ),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(30.0),
              borderSide: const BorderSide(
                color: Colors.black26,
                width: 0.2,
              ),
            ),
          ),
        ),
      ),