[英]How do I only apply padding to the text in a TextField in Flutter?
Without padding I get this result:没有填充我得到这个结果:
With something like this有了这样的东西
Padding(padding: EdgeInsets.all(20.0), child: TextField())
I get the following result:我得到以下结果:
It might be a bit hard to see, but you only have to look at the red badge across the edge to realise what I mean.可能有点难看,但你只要看看边缘的红色徽章就能明白我的意思。
I would like to only move the text with my padding, but in reality the whole TextField
has the padding applied, ie that the underline moves with the padding, but I would like to have the underline still go across the whole view, that only the text inside the TextField
is affected by the padding.我只想用我的填充移动文本,但实际上整个
TextField
都应用了填充,即下划线随着填充移动,但我希望在整个视图中仍然有下划线 go,只有TextField
中的文本受填充影响。
To apply the padding to the content of the TextField
.将填充应用于
TextField
的内容。 You can apply the您可以申请
contentPadding property of ItemDecoration at decoration property of TextField.
ItemDecoration 的 contentPadding 属性位于 TextField 的装饰属性。
Like this:像这样:
TextField(
textAlign: TextAlign.left,
decoration: InputDecoration(
hintText: 'Enter Something',
contentPadding: EdgeInsets.all(20.0),
),
)
Works for me:对我有用:
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,
)
If you want to apply uneven, vertical padding to each side of the text inside the TextField, you'll have to first set textAlignVertical to TextAlignVertical.top.如果您想对 TextField 内文本的每一侧应用不均匀的垂直填充,您必须首先将 textAlignVertical 设置为 TextAlignVertical.top。
If you don't do this, the largest top/bottom padding will apply to both the top and bottom of the text.如果不这样做,最大的顶部/底部填充将同时应用于文本的顶部和底部。 I'm guessing this is because the TextField text is always centered horizontally.
我猜这是因为 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(),
),
If you are creating TextField as children widget in Column/Row widget it may not work if you set padding/content padding to textfield in root Widget.如果您在 Column/Row 小部件中创建 TextField 作为子部件,如果您在根 Widget 中将 padding/content padding 设置为文本字段,则它可能无法工作。
Make sure always setting content padding based on your requirement at TextField level using InputDecoration确保始终使用InputDecoration根据您在 TextField 级别的要求设置内容填充
here is simple snippet for setting up padding for TextField content这是为 TextField 内容设置填充的简单片段
TextField(
decoration: InputDecoration(
hintText: 'Title',
contentPadding: EdgeInsets.all(8)),
keyboardType: TextInputType.phone,
)
Result:结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.