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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

HarmonyOS

zbw_apple

2024-12-25 12:23:57

721浏览

回答 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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

参考文档：

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

2024-12-25 14:32:18

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看