HarmonyOS 如何让文本保持视觉上的底部对齐？

Question

一个Flex容器内有两个Text，字体大小不一样，虽设置了底部对齐，但文本内容并未视觉上底部对齐。

要如何实现视觉上的底部对齐，且在内容变长、字体缩小的情况下也能一直保持？

Answer 1

可以看下这个demo

Text() {
  ContainerSpan(){
    Span('101')
      .fontSize(40)
      .fontWeight(FontWeight.Bold)
    Span('号交流')
      .fontSize(18)
  }.textBackgroundStyle({color:0xFF0000})
  ContainerSpan(){
    Span('慢')
      .fontColor(Color.White)
      .fontSize(20)
      .padding(2)
      .borderRadius(2)
  }.textBackgroundStyle({color:0x20AD48})
}