Flutter的TextField在设置高度后,如果布局高度小于它的默认高度,那么它的文本在垂直居中上就会有问题。
网上的解决方案很多(最简单的解决方案在最下面,耐心看):
有设置 contentPadding的:
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0),
),
//或者
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 0),
),
设置对其方式textBaseline的:
TextField(
style: TextStyle(textBaseline: TextBaseline.alphabetic),
)
///如果需要全局配置 可以使用下面方式
ThemeData(
textTheme: TextTheme(
subhead: TextStyle(
textBaseline: TextBaseline.alphabetic,
),
),
),
设置 TextField 里面的 decoration 对应的 InputDecoration 中的 boder 参数的:
decoration: InputDecoration(
// textfield 内文字居中设置 -------------- start
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 0, color: Colors.transparent)),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 0, color: Colors.transparent)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 0, color: Colors.transparent)),
border: OutlineInputBorder(
borderSide:
BorderSide(width: 0, color: Colors.transparent)), // 不需要输入框下划线
contentPadding:
EdgeInsets.only(left: ScreenTool.dp(24)), // 输入里面输入文字内边距设置
// textfield 内文字居中设置 -------------- end
我个人推荐的方式是使用isCollapsed: true
来修正:
TextField(
decoration: InputDecoration(
isCollapsed: true,
...
)
)
搞定。
网友评论