如何仅对Flutter中的TextField中的文本应用填充？

Question

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

有这样的东西

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

我得到以下结果：

可能有点难以看到，但你只需要看看边缘的红色徽章就能明白我的意思。

我只想用填充移动文本，但实际上整个TextField都应用了填充，即下划线随着填充移动，但我希望下划线仍然可以通过整个视图，只有TextField内的文本受到填充的影响。

Answer 1

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

  

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

像这样：

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

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

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