flutter 文本对齐

2023-07-25  本文已影响0人  Fillinse

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

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

效果图:


截屏2023-07-26 17.49.16.png

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

上一篇 下一篇

猜你喜欢

热点阅读