HarmonyOS 文字标题没有垂直居中对齐

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State buttonTest: string = '点击我到测试页面';

  build() {
    Column() {
      Row() {
        Row() {
          Text() {
            ImageSpan($r('app.media.ic_notice_top'))
              .width(36)
              .height(16)
              .verticalAlign(ImageSpanAlignment.CENTER)
              .margin({
                right: 8,
              })
            Span("测试标题")
              .fontSize(14)
              .fontColor('#0A0D19')
              .lineHeight(32)

            ImageSpan($r('app.media.ic_notice_new'))
              .width(36)
              .height(16)
              .margin({ left: 8 })
              .verticalAlign(ImageSpanAlignment.CENTER)
          }
          .backgroundColor(Color.Yellow)
        }
        // .margin({
        //   left: 6
        // })
        .layoutWeight(1)
        .alignItems(VerticalAlign.Center)
      }
      .alignItems(VerticalAlign.Top)
      .width('100%')

      Column() {
        // Text('发表时间：' + this.news.publishTime)
        //   .fontSize(12)
        //   .lineHeight(17)
        //   .fontColor('#41454B')
        //   .margin({ top: 4 })
        //   .padding({ left: 10, right: 10 })
        //   .width('100%')
        Divider()
          .height(1)
          .margin({
            // left: 10,
            // right: 10,
            top: 10,
            bottom: 14
          })
          .backgroundColor('#E1E1E1')
      }
      .width('100%')
    }
  }
}

HarmonyOS

Heiang

2024-12-24 17:51:48

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

1、可以尝试设置ImageSpan的margin（{top:topValue}）到合适的位置

2、imageSpan设置属性.verticalAlign(ImageSpanAlignment.BASELINE)，中间的Span设置baselineOffset，这样会好一点，两个image的位置跟着中间的span走。

示例参考：

import { LengthUnit } from '@ohos.arkui.node';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State buttonTest: string = '点击我到测试页面';

  build() {
    Column() {
      Row() {
        Text() {

          ImageSpan($r('app.media.ic_notice_top'))
            .width(36)
            .height(16)
            .verticalAlign(ImageSpanAlignment.CENTER)
            .margin({
              right: 8,
            })
            .verticalAlign(ImageSpanAlignment.BASELINE)
          Span("测试标题测试标题测试标测试标题测试标题测试标测试标题测试标题测试标测试标题测试标题测试标测试标题测试标题测试标")
            .fontSize(14)
            .fontColor('#0A0D19')// .lineHeight(20)
            .lineHeight(32)
            .baselineOffset({
              value: 8,
              unit: LengthUnit.PX
            })

          ImageSpan($r('app.media.ic_notice_new'))
            .width(36)// .height(16)
            .margin({ left: 8 })
            .verticalAlign(ImageSpanAlignment.CENTER)
            .verticalAlign(ImageSpanAlignment.BASELINE)
        }
        // .height(32)
        .backgroundColor(Color.Yellow)
      }

      .layoutWeight(1)
      .alignItems(VerticalAlign.Top)

    }
  }
}

2024-12-24 19:53:01

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 文字标题没有垂直居中对齐

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