Flutter技术问题:如何将图标底部对齐至屏幕中心
解决Flutter Align组件图标底部对齐屏幕中心的问题
要实现图标底部对齐屏幕中心,有两种简洁的实现方式:
方式一:利用Alignment相对坐标(推荐)
无需硬编码像素偏移,通过调整Alignment的垂直参数即可实现适配所有屏幕的效果:
Align( child: Icon( ModernPictograms.location, size: 50, ), alignment: Alignment(0, 0.5), )
说明:Alignment(x,y)的坐标体系中,y轴范围是-1(父组件顶部)到1(父组件底部),中心为(0,0)。设置y=0.5后,会将图标的底部对齐到父组件的垂直中心位置,完全符合需求。
方式二:固定像素偏移(适合图标尺寸固定的场景)
如果坚持用你推测的“向上偏移自身高度一半”的思路,可以用Transform.translate包裹图标实现:
Align( alignment: Alignment.center, child: Transform.translate( offset: Offset(0, -25), // 向上偏移25像素,对应图标高度50的一半 child: Icon( ModernPictograms.location, size: 50, ), ), )
内容的提问来源于stack exchange,提问作者cueless
相关产品推荐
相关产品推荐

