如何仅对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(),
      ),