Text文本不垂直居中,该怎么处理呢?

Text文本不垂直居中。

HarmonyOS
2024-06-04 23:40:10
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
xiaohur

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%") 
  } 
}
  • 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.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
分享
微博
QQ
微信
回复
2024-06-05 20:06:16
相关问题
HarmonyOS Text多行文本不居中对齐
1922浏览 • 1回复 待解决
画布绘制文字,垂直居中
947浏览 • 1回复 待解决
Text怎么设置文本渐变?
1237浏览 • 0回复 待解决
HarmonyOS 富文本不支持trthtd标签
1014浏览 • 1回复 待解决
HarmonyOS 文本居中
1089浏览 • 1回复 待解决
HarmonyOS 文字标题没有垂直居中对齐
635浏览 • 1回复 待解决
HarmonyOS Text组件中,文本怎么换行
1291浏览 • 1回复 待解决
HarmonyOS使用canvas如何使文字垂直居中
1422浏览 • 1回复 待解决
Text怎么显示带html标签的文本
5528浏览 • 1回复 待解决
模拟器无法启动怎么解决
1704浏览 • 1回复 待解决
Text怎么解析展示带html标签的文本
2857浏览 • 1回复 待解决
HarmonyOS Text设置align不居中
1156浏览 • 1回复 待解决
Tab组件,无法左对齐怎么处理
1149浏览 • 1回复 待解决
上传文件接口报错 ,怎么处理啊?
1599浏览 • 1回复 待解决