HarmonyOS 如何把背景色中的文字放在垂直居中的位置

下面demo的文字好像往下掉了一点，相对于背景色而言，如何把背景色中的文字放在垂直居中的位置

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text() {
        ContainerSpan() {
          // ImageSpan($r('app.media.point')).width(12).height(12).margin({left:4, right:4}).verticalAlign(ImageSpanAlignment.CENTER)
          Span('唯品国际')
            .fontSize(11)
            .fontWeight(FontWeight.Medium)
            .fontColor(Color.White)
          // .baselineOffset(LengthMetrics.vp(1))
          Span(' ')
        }.textBackgroundStyle({color:0x5E36D9, radius:4})
        Span(' ')
        ContainerSpan() {
          Span(' ')
          Span('包税').fontSize(11).fontWeight(FontWeight.Medium).fontColor(Color.White)
          Span(' ')
        }.textBackgroundStyle({color:0x5E36D9, radius:4})
        Span(' ')
        // Span(this.viewModel.productTitle())
      }.fontSize(16).fontWeight(FontWeight.Medium).fontColor(0x1B1B1B).lineHeight(22)
    }
    .width('100%')
    .height('100%')
  }
}

HarmonyOS

zbw_apple

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

出现demo的文字好像往下掉了一点的原因是Span(' ')默认的fontSize是16，设置11会导致下掉的情况。

可以参考下面这个demo。

// xxx.ets
@Component
@Entry
struct Index {
  build() {
    Column() {
      Text() {
        ContainerSpan() {
          ImageSpan($r('app.media.app_icon'))
            .width('40vp')
            .height('40vp')
            .verticalAlign(ImageSpanAlignment.CENTER)
          Span(' Hello World ! ').fontSize('16fp').fontColor(Color.White)
        }.textBackgroundStyle({color: "#7F007DFF", radius: "12vp"})
      }
    }.width('100%').alignItems(HorizontalAlign.Center)
  }
}

参考文档：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-containerspan.md#textbackgroundstyle%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E