美文网首页
flutter 文本对齐

flutter 文本对齐

作者: Fillinse | 来源:发表于2023-07-25 18:02 被阅读0次

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

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

    效果图:


    截屏2023-07-26 17.49.16.png

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

    相关文章

      网友评论

          本文标题:flutter 文本对齐

          本文链接:https://www.haomeiwen.com/subject/waehpdtx.html