Flutter TextField 设置高度后文本无法居中

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

搞定。

你可能感兴趣的:(Flutter TextField 设置高度后文本无法居中)