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
相关问题
Text怎么显示带html标签的文本
2906浏览 • 1回复 待解决
Text怎么解析展示带html标签的文本
1379浏览 • 1回复 待解决
Input组件是否支持设置文本居中对齐
526浏览 • 1回复 待解决
怎么text文本排在image里面的右下角
268浏览 • 1回复 待解决
ArkTS实现Text文本的【...展开】
344浏览 • 1回复 待解决
注册监听关机事件,如何处理
408浏览 • 1回复 待解决
JS中的input值文本对齐如何实现?
6882浏览 • 1回复 待解决
权限的申请与校验,如何处理啊?
393浏览 • 1回复 待解决
监听音频打断事件,如何处理
387浏览 • 1回复 待解决
ArkTS语法校验报错,如何处理啊?
331浏览 • 1回复 待解决
text怎么更改部分文字颜色
5564浏览 • 1回复 待解决
Text实现scroll效果怎么弄?
3933浏览 • 1回复 待解决
Android下述图片布局怎么解决?
3973浏览 • 2回复 待解决
提示数据丢失怎么处理?
3610浏览 • 2回复 待解决
应用跳转问题怎么处理
3802浏览 • 1回复 待解决