flutter 文本对齐

在row或者column中,会出现多个文本一起展示的情况,如果不同的文本的语言不同,就会导致显示问题,因为不同语言的fontsize不一样,而Text展示是根据fontsize计算大小的,所以就需要一种对齐方式
一般分两种对齐方式:
1 中对齐,设置容器的主轴对齐方式为中,或者将需要对齐的文本宽度/高度固定,即可解决
2 基准线对齐,如果文本涉及到多行,并且不想中对齐,就需要设置容器的对齐方式为基准线对齐,一下两者搭配使用,如果只使用textBaseline,则是中对齐

          crossAxisAlignment: CrossAxisAlignment.baseline,
          textBaseline: TextBaseline.alphabetic,

效果图:


截屏2023-07-26 17.49.16.png

订单编号、支付时间均为基准线对齐,因为字母数字和中文在相同字体下,实际大小不一样,所以效果相对看的明显,而且使用说明则看不出来,因为都是中文。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容