Flutter多行TextField文本被输入装饰遮挡问题求助

你将TextField设置为多行输入模式后，输入的文本被InputDecoration遮挡，单行模式正常工作，切换为多行后出现该问题。

相关代码如下：

TextField(
  style: Theme.of(context)
      .textTheme
      .headline4,
  onChanged: (value) {
    if (value != '') {
      setState(() {
        hasText = true;
      });
    } else {
      setState(() {
        hasText = false;
      });
    }
  },
  onSubmitted: (value) {
    //clear the text controller and the image and un focus the text field and set is typing to false
    _textEditingController.clear();

    _focusNode.unfocus();
    setState(() {
      isTyping = false;
      _image = null;
    });
  },

  //allow the text to be multiline

  keyboardType: TextInputType.multiline,
  maxLines: null,
  focusNode: _focusNode,
  controller: _textEditingController,
  decoration: InputDecoration(
      filled: true,
      //circular border
      border: OutlineInputBorder(

          //no border
          borderSide: BorderSide.none,
          borderRadius:
              BorderRadius.circular(25)),
      //light grey color
      fillColor: Color(0xffF2F2F2),
      hintText:
          'Reply to ${widget.waveTile.poster.handle}'),
  onTap: () {
    setState(() {
      isTyping = true;
    });
  },
),

效果如图：

问题原因 #

核心原因是你使用了headline4这类大字号的主题文本样式，而多行模式下TextField的默认内边距没有适配该大字号：

• 单行模式时，TextField会自动调整内边距来适配文本大小，避免文本与装饰区域重叠；
• 切换到多行模式（设置maxLines: null）后，TextField不再自动适配内边距，默认的内边距空间不足以容纳大字号文本，导致文本被输入装饰的填充区域/圆角边框遮挡。

如果要解决这个问题，只需要在InputDecoration中添加contentPadding属性，设置合适的上下左右内边距即可，比如：

decoration: InputDecoration(
  // 其他属性不变
  contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),

内容的提问来源于stack exchange，提问作者Ruder Buster