美文网首页
Flutter TextField 设置高度后文本无法居中

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

作者: IUVO | 来源:发表于2022-08-27 12:24 被阅读0次

    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 设置高度后文本无法居中

          本文链接:https://www.haomeiwen.com/subject/lzlfnrtx.html