HarmonyOS 鸿蒙Next Text文本不垂直居中

解决方案：

Text组件不用设置lineHeight属性，默认就是居中的。绘制文本是从底部开始绘制的，设置合适的lineHeight可以让文本有居中效果，但如果lineHeight设置的过高，文本就会显得偏下一些，一般lineHeight属性用来联合padding属性调整Text内的上下行间距。目前可以通过如下几个方案实现垂直居中。

1.不设置lineHeight，默认文本在文本框就是居中的；

2.设置合适的lineHeight，使Text看起来居中；

3.设置不合适的lineHeight,配合padding，让Text居中；

4.设置不合适的lineHeight,不使用padding，这种需要在module.json5的module下添加以下配置：“metadata”: [{“name”: “half_leading”,“value”: “true”,}],值得注意的是，该方法谨慎使用，因为是对当前hap整体生效的，可能会影响其他的已经开发好的Text显示。例如如果其他Text使用lineHeight和padding已经调整了居中，但是又设置了这个属性，会导致原来已经居中的不再居中。

@Entry 
@Component 
struct TextSpanPage { 
  build() { 
    Column() { 
      Row() { 
        Text("你好啊".split('').join('\u200B')) 
          .fontSize(15) 
          .fontColor(Color.Black) 
          .textOverflow({ 
            overflow: TextOverflow.Ellipsis 
          }) 
          .borderWidth(1) 
          .lineHeight(22) 
          .maxLines(1) 
          .constraintSize({ 
            maxWidth: 80 
          }) 
          .margin({ 
            right: 10 
          }) 
 
        /* 
        TODO 需要在module.json5中配置half_leading为TRUE，则这种也是垂直居中的 
        该方法谨慎使用，因为是对当前hap整体生效的，可能会影响其他的已经开发好的Text显示。 
        例如如果其他Text使用lineHeight和padding已经调整了居中，但是又设置了这个属性，会导致原来已经居中的不再居中。 
        */ 
        Text("你好啊".split('').join('\u200B')) 
          .fontSize(15) 
          .fontColor(Color.Black) 
          .textOverflow({ 
            overflow: TextOverflow.Ellipsis 
          }) 
          .borderWidth(1) 
          .lineHeight(60) 
          .maxLines(1) 
          .margin({ 
            right: 10 
          }) 
 
        Text("默认文字在文本框就是垂直居中".split('').join('\u200B')) 
          .fontSize(15) 
          .fontColor(Color.Black) 
          .textOverflow({ 
            overflow: TextOverflow.Ellipsis 
          }) 
          .borderWidth(1) 
          .maxLines(1) 
      } 
      .alignItems(VerticalAlign.Center) 
      .backgroundColor(Color.Blue) 
 
      Row() { 
        Text("设置lineHeight过高，通过padding调整".split('').join('\u200B')) 
          .fontSize(15) 
          .fontColor(Color.Black) 
          .textOverflow({ 
            overflow: TextOverflow.Ellipsis 
          }) 
          .lineHeight(60) 
          .borderWidth(1) 
          .maxLines(1) 
          .padding({ bottom: 22.5 }) 
      }.alignItems(VerticalAlign.Center) 
      .backgroundColor(Color.Yellow) 
    }.width("100%").height("100%") 
  } 
}