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

Question

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

像这样的东西

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

我得到以下结果：

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

我只想用填充移动文本，但实际上整个

TextField

都应用了填充，即下划线随填充移动，但我希望下划线仍然穿过整个视图，只有

TextField

内的文本才会受到填充的影响。

Answer 1

将填充应用于

TextField

的内容。您可以申请

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

像这样：

TextField(
  textAlign: TextAlign.left,
  decoration: InputDecoration(
    hintText: 'Enter Something',
    contentPadding: 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(),
      ),

Answer 4

您可以使用“contentPadding”和“isDesnse”的组合来实现您的需求。

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

Answer 5

如果您在列/行小部件中将文本字段创建为子小部件，则如果您在根小部件中将填充/内容填充设置为文本字段，则可能无法工作。

确保始终根据您在 TextField 级别的要求使用 InputDecoration

设置内容填充

这是用于设置 TextField 内容填充的简单代码片段

TextField(
  decoration: InputDecoration(
    hintText: 'Title', 
    contentPadding: EdgeInsets.all(8)),
    keyboardType: TextInputType.phone,
 )

结果：

Answer 6

您可以使用InputDecoration的

contentPadding

。 这是示例代码

TextFormField(
  maxLines: 5,
  decoration: InputDecoration(
  contentPadding: EdgeInsets.symmetric(vertical: 5), // Change as per requirement 
  labelText: 'Label Text',
  labelStyle: txtHintStyle,
 )
)