HarmonyOS Text中的ImageSpan和Span

HarmonyOS Text中的ImageSpan和Span-鸿蒙开发者社区

如截图所示,我用Text的ImageSpan和Span实现了一个订阅按钮的功能,前面的+是ImageSpan的图片。后面的订阅文案是Span。

现在这两个组件无法上下居中对齐,需要怎么处理?

//订阅 
Text() { 
  ImageSpan(this.isSubscribed ? $r('app.media.subscribe_success') : $r('app.media.subscribe_add')) 
    .width($r('app.float.vp_16')) 
    .width($r('app.float.vp_20')) 
  Span(this.isSubscribed ? $r('app.string.is_subscribed') : $r('app.string.subscribe')) 
    .fontSize($r('app.float.fp_10')) 
    .fontColor(this.isSubscribed ? $r('app.color.quaternaryText') : $r('app.color.album_color')) 
    .align(Alignment.Center) 
    .backgroundColor(Color.Pink) 
} 
.textAlign(TextAlign.Center) 
.margin({ 
  left: $r('app.float.vp_12') 
}) 
.height($r('app.float.vp_20')) 
.padding({ 
  left: $r('app.float.vp_7'), 
  right: $r('app.float.vp_7'), 
}) 
.borderRadius($r('app.float.vp_11')) 
.borderColor(this.isSubscribed ? $r('app.color.quaternaryText') : $r('app.color.album_color')) 
.borderWidth($r('app.float.vp_1'))
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
HarmonyOS
2024-08-28 18:24:26
1257浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zbw_apple

检查下是否是

ImageSpan(this.isSubscribed ? $r('app.media.subscribe_success') : $r('app.media.subscribe_add')) 
  .width($r('app.float.vp_16')) 
  .width($r('app.float.vp_20'))
  • 1.
  • 2.
  • 3.

没有设置高度造成的,设置了两次宽度

参考:

ImageSpan($r('app.media.icon')) 
  .width(16) 
  .height(20) 
  .verticalAlign(ImageSpanAlignment.CENTER)
  • 1.
  • 2.
  • 3.
  • 4.
分享
微博
QQ
微信
回复
2024-08-28 22:52:35


相关问题
HarmonyOS TextSpan显示问题
1151浏览 • 1回复 待解决
HarmonyOS Text 中使用 ImageSpan 问题
1171浏览 • 1回复 待解决
HarmonyOS Textspan不能设置间距吗
633浏览 • 1回复 待解决
HarmonyOS Text/Span使用问题
1072浏览 • 1回复 待解决
HarmonyOS TextSpan不支持align
742浏览 • 1回复 待解决
HarmonyOS Text内部Span宽度设置无效
731浏览 • 1回复 待解决
HarmonyOS TextSpan有办法底部对齐吗
626浏览 • 1回复 待解决
HarmonyOS 使用Text里套Span标签使用问题
1105浏览 • 1回复 待解决
HarmonyOS span如何设置圆角
1126浏览 • 1回复 待解决
HarmonyOS Span封装问题
482浏览 • 1回复 待解决