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

搞定。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容