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%") 
  } 
}
分享
微博
QQ
微信
回复
2024-06-05 20:06:16
相关问题
HarmonyOS Text多行文本不居中对齐
425浏览 • 1回复 待解决
画布绘制文字,垂直居中
234浏览 • 1回复 待解决
Text怎么设置文本渐变?
173浏览 • 0回复 待解决
HarmonyOS使用canvas如何使文字垂直居中
475浏览 • 1回复 待解决
Text怎么显示带html标签的文本
4272浏览 • 1回复 待解决
项目启动报错怎么处理啊?
239浏览 • 1回复 待解决
Grid组件显示异常怎么处理
238浏览 • 1回复 待解决
Text怎么解析展示带html标签的文本
1982浏览 • 1回复 待解决
HarmonyOS Text设置align不居中
431浏览 • 1回复 待解决
Tab组件,无法左对齐怎么处理
283浏览 • 1回复 待解决
模拟器无法启动怎么解决
34浏览 • 1回复 待解决
怎么text文本排在image里面的右下角
599浏览 • 1回复 待解决
Input组件是否支持设置文本居中对齐
1861浏览 • 1回复 待解决
ArkTS实现Text文本的【...展开】
1529浏览 • 2回复 待解决
获取文本Text组件的宽度
382浏览 • 1回复 待解决