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