萌萌の初音
萌萌の初音
发布于 2021-05-20 / 913 阅读
0

取消TextField默认的最小高度

问题的显现:新项目使用flutter进行开发,使用TextField输入框控件并与其他控件水平对齐时无法对齐,在外部包裹Padding对齐,但更换设备测试后会产生不一样的效果无法满足需求,如图:
IMG_20210521_1008371.jpg
随后尝试使用Column控件,在TextField上下加入Expanded控件进行居中,结果报错提示高度超限,仔细研究发现TextField在检测外部没有高度限制的情况下会自己生成一个最小高度,只需要在decoration这个参数里添加isCollapsed: true就可以解决无法居中的问题,贴代码和图片:
IMG_20210521_1014152.jpg

Container(
  padding: EdgeInsets.only(left: 16,right: 16,),
  height: 40,
  alignment: Alignment.center,
  child: TextField(
    maxLines: 1,
    decoration: InputDecoration(
    isCollapsed: true,//设置为true取消自带的最小高度
    border: InputBorder.none,//取消下划线带来的高度影响
    enabledBorder: InputBorder.none,
    errorBorder: InputBorder.none,
    focusedBorder: InputBorder.none,
    focusedErrorBorder: InputBorder.none,
    disabledBorder: InputBorder.none,
    ),
  ),
),

这样就解决了不同机型不同字体比例导致UI显示效果不一致的问题了~