HarmonyOS 对Text控件设置了lineHeight后,文字在水平方向不居中,导致视觉上和其他控件不对齐

【Text控件】对Text控件设置了lineHeight后,文字在水平方向不居中,导致视觉上和其他控件不对齐

1、较小的字号会更加明显

2、不止Preview会有这个问题,跑在模拟器/真机上依然有一样的问题

HarmonyOS
2024-08-10 12:44:34
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

文字在水平方向不居中,导致视觉上和其他控件不对齐,是因为text文本存在基线的问题,这边只需设置文本基线偏移量,就可以实现文本水平上的居中对应的设置 API 为 Text(’’) .baselineOffset(3),其中 baselineOffset 是设置 基线偏移 API ,3 就是偏移量,要根据实际情况设置以下为修改后的代码:

// 变量定义 
@State textSize : number = 12 
@State baseline : number = 3 
 
// build 组件 
@Builder 
UserInfo(userInfo: User) { 
  Row({ space: 12 }) { 
    Image(userInfo.photoUrl) 
      .width(54) 
      .height(54) 
      .clip(new Circle({ width: 54, height: 54 })); 
 
    Column() { 
      Row({ space: 6 }) { 
        Text(userInfo.nickName) 
          .fontSize(16) 
          .lineHeight(26) 
          .fontWeight(FontWeight.Bold) 
          .maxLines(1) 
          .textOverflow({ overflow: TextOverflow.Ellipsis }) 
          .constraintSize({ maxWidth: 135 }); 
        Text('Lv1') 
          .fontSize(12) 
          .lineHeight(24) 
          .fontColor(Color.Green); 
      }; 
 
      Row({ space: 8 }) { 
        Text(`${userInfo.stageName}${userInfo.subjectName}`) 
          .baselineOffset(this.baseline) 
          .fontSize(this.textSize) 
          .fontColor('#777') 
          .lineHeight(20) 
            // .backgroundColor(Color.Yellow) 
          .textAlign(TextAlign.Center) 
        Divider() 
          .width(1) 
          .height(20) 
          .backgroundColor('#777') 
        Text(userInfo.unitName) 
          .baselineOffset(this.baseline) 
          .fontSize(this.textSize) 
          .fontColor('#777') 
          .lineHeight(20) 
            // .backgroundColor(Color.Blue) 
          .textAlign(TextAlign.Center) 
      } 
      .alignItems(VerticalAlign.Center) 
      .justifyContent(FlexAlign.Center) 
    } 
    .layoutWeight(1) 
    .alignItems(HorizontalAlign.Start); 
  } 
  .width('100%') 
}
分享
微博
QQ
微信
回复
2024-08-10 17:50:57
相关问题
HarmonyOS Text设置align居中
568浏览 • 1回复 待解决
Panel不支持水平方向的拖拉
670浏览 • 1回复 待解决
Java Text控件,如何设置字间距?
7016浏览 • 1回复 待解决
HarmonyOS 文字行高设定后文字居中
386浏览 • 1回复 待解决
HarmonyOS Text多行文本不能居中对齐
659浏览 • 1回复 待解决
HarmonyOS 自定义时间控件日期控件
336浏览 • 1回复 待解决
HarmonyOS 设置iconlabel生效
330浏览 • 1回复 待解决
HarmonyOS 如何设置控件样式?
304浏览 • 1回复 待解决
Input组件是否支持设置文本居中对齐
1984浏览 • 1回复 待解决