HarmonyOS 鸿蒙Next 两个字体大小不同的Text如何在基准线对齐

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 两个字体大小不同的Text如何在基准线对齐

                                                    

Harmonyos Next教程
3 回复

可以在一个text中放多个span:

[@Entry](/user/Entry)
[@Component](/user/Component)
struct testAlign {
  build() {
    Row() {
      Text() {
        Span('4.18')
          .fontSize(24)
          .fontColor(Color.Green)
        Span('分')
          .fontSize(14)
          .fontColor(Color.Red)
      }
    }
  }
}

此外，要是想在两个span之间添加margin，可以参考：‘https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-span-V13’

如果是要在一行上显示的话，两个text外面可以套一个Row组件。然后用 
.alignItems(VerticalAlign.Center)

Row组件交叉轴对齐

在HarmonyOS鸿蒙Next中，要实现两个字体大小不同的Text组件在基准线对齐，可以采取以下方法：

  1. 使用相同字体：确保两个Text组件使用相同的字体，以避免因字体差异导致的基准线不对齐问题。
  2. 调整布局：将两个Text组件放置在同一布局容器内，如DirectionalLayout或FlexLayout，并设置适当的对齐属性。例如，可以使用alignment属性设置为baseline（如果支持），或者通过调整布局和间距来模拟基准线对齐的效果。
  3. 自定义TextLayout：在极端情况下，如果上述方法无法满足需求，可以考虑自定义TextLayout。通过自定义TextLayout，可以更精确地控制文本的布局和间距，包括基准线的位置。

请注意，鸿蒙系统的UI组件和属性配置可能随着版本更新而发生变化。如果上述方法在当前版本的鸿蒙系统中无法实现，建议查阅官方文档或API参考手册以获取最新的信息和属性配置。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部