HarmonyOS RNOH Text组件设置了lineHeight文字不居中

<Text
numberOfLines={1}
style={{
  maxWidth: 60,
  textAlign: 'center',
  color: '#262626',
  fontSize: 14,
  lineHeight: 30,
  backgroundColor: 'red',
}}>
{'定位中'}
</Text>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

设置了lineHeight,文字不在中间在偏下位置,设置了textAlignVertical: 'center'也不管用。

HarmonyOS
2025-01-10 09:20:56
1.2w浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Excelsior_abit

text组件的height和lineHeight设置的是Text本身的属性,若是设置文本相对于文本框的位置可以使用lineHeight配合padding实现垂直居中。若是设置文本框相对于父组件的垂直居中,可以通过.justifyContent(FlexAlign.Center)设置父组件中子元素主轴上居中,通过.alignItems(HorizontalAlign.Center)/.alignItems(VerticalAlign.Center)设置纵向/横向布局父组件中子元素在交叉轴上居中。或者在module.json5的module中添加:

"metadata": [{
  "name": "half_leading",
  "value": "true"
}],
  • 1.
  • 2.
  • 3.
  • 4.

值得注意的是,该方法谨慎使用,因为是对当前hap整体生效的,可能会影响其他的已经开发好的Text显示。例如如果其他Text使用lineHeight和padding已经调整了居中,但是又设置了这个属性,会导致原来已经居中的不再居中。

分享
微博
QQ
微信
回复
2025-01-10 11:21:40


相关问题
HarmonyOS Text设置align居中
881浏览 • 1回复 待解决
HarmonyOS 文字行高设定后文字居中
716浏览 • 1回复 待解决
HarmonyOS Text组件如何设置文字方向
360浏览 • 1回复 待解决
HarmonyOS 文字在Row中居中
443浏览 • 1回复 待解决
HarmonyOS text组件设置width
467浏览 • 1回复 待解决
HarmonyOS Text部分文字高亮设置
515浏览 • 1回复 待解决
画布绘制文字,垂直居中
632浏览 • 1回复 待解决
HarmonyOS 弹窗文字居中
203浏览 • 1回复 待解决
HarmonyOS Text组件是否支持文字描边
479浏览 • 1回复 待解决
HarmonyOS 设置icon和label生效
793浏览 • 1回复 待解决
HarmonyOS text组件设置copyOption
295浏览 • 1回复 待解决