如何仅将填充应用于 Flutter 中 TextField 中的文本？答案

【问题标题】：How do I only apply padding to the text in a TextField in Flutter?如何仅将填充应用于 Flutter 中 TextField 中的文本？
【发布时间】：2018-10-10 09:40:27
【问题描述】：

没有填充我得到这个结果：

这样的事情

Padding(padding: EdgeInsets.all(20.0), child: TextField())

我得到以下结果：

这可能有点难以看清，但您只需看看边缘的红色徽章即可理解我的意思。

我只想用我的填充移动文本，但实际上整个TextField 都应用了填充，即下划线随着填充移动，但我希望下划线仍然贯穿整个看来，只有TextField 内的文本受填充影响。

【问题讨论】：

标签： dart flutter

【解决方案1】：

将填充应用于TextField 的内容。你可以申请

TextField 的装饰属性中 ItemDecoration 的 contentPadding 属性。

像这样：

TextField(
  textAlign: TextAlign.left,
  decoration: InputDecoration(
    hintText: 'Enter Something',
    contentPadding: EdgeInsets.all(20.0),
  ),
)

【讨论】：

您可能还需要考虑InputDecoration 中的isDense: true，以获得比默认值更小的更精确的填充。
@Giraldi isDense:true 真的很有帮助。

【解决方案2】：

为我工作：

TextFormField(
  decoration: InputDecoration(
    border: InputBorder.none,
    contentPadding: EdgeInsets.symmetric(vertical: 10), //Change this value to custom as you like
    isDense: true, // and add this line
    hintText: 'User Name',
    hintStyle: TextStyle(
        color: Color(0xFFF00),
  )),
  keyboardType: TextInputType.text,
  style: TextStyle(
      color: Color(0xFFF00),
      fontSize: 14),
  maxLines: 1,
)

【讨论】：

isDense 很重要。现在默认的垂直填充消失了。谢谢
我应用了 isDense=true。但仍然没有像我设置的那样设置底部填充。
感谢“isDense”提示！节省时间:)

【解决方案3】：

如果您想对 TextField 内文本的每一侧应用不均匀的垂直填充，您必须首先将 textAlignVertical 设置为 TextAlignVertical.top。

如果您不这样做，最大的顶部/底部填充将同时应用于文本的顶部和底部。我猜这是因为 TextField 文本总是水平居中。

TextField(
        controller: model.captionController,
        maxLines: null,
        minLines: 8,
        maxLength: 200,
        textAlignVertical: TextAlignVertical.top,
        decoration: PostFilledField('Add a caption...').copyWith(
          contentPadding: EdgeInsets.fromLTRB( 8, 0,  8, 90.0),
          isDense: true
        ),
        style: PostSmallText(),
      ),

【讨论】：

嗨，什么是 PostFilledField？