HarmonyOS Text组件下面的Span元素之间如何设置间距？

请问以下Text组件下面的Span元素之间如何设置间距。

比如下面的示例代码：

Text(){  
  
  if(this.item.userType === LIVE_MESSAGE_USER_TYPE_TEACHER){  
    //主讲身份标签  
    Span('老师').padding(2).margin(2).fontSize(14).letterSpacing(2).fontColor(Color.White).textBackgroundStyle({color: "#FDE2C6", radius: "4vp"})  
  }else if(this.item.userType === LIVE_MESSAGE_USER_TYPE_ASSISTANT){  
    // 助教身份标签  
    Span('助教').padding(2).margin(2).fontSize(14).fontColor(Color.White).textBackgroundStyle({color: "#C1813F", radius: "4vp"}).padding(2)  
  }else {  
    // 普通用户没有身份标签  
  }  
  // 用户名  
  Span(this.item.name + ':').fontSize(16).fontColor('#999999')  
  // 文本内容  
  Span(this.item.content).fontSize(16).fontColor('#1a1a1a')  
  
}  
.padding(5)  
.backgroundColor(Color.White)  
.borderRadius(5)

代码中Text下面套了Span 老师和助教的身份标签有颜色背景设置了内边距和外边距.padding(2).margin(2)

是否有办法实现这个目的功能？请给例子。

HarmonyOS

Heiang

2024-10-28 10:09:15

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

span组件不支持margin属性，span作为Text、ContainerSpan组件的子组件，仅支持文本通用属性。

另外可以继承父组件Text的属性，支持继承的属性仅包括：fontColor、fontSize、fontStyle、fontWeight、decoration、letterSpacing、textCase、fontfamily、textShadow。

具体参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-span-V5#属性

您可以使用row和text组件，请验证是否符合您的要求。

Row(){  
  if(this.item.userType === 0){  
    Text('老师').padding(2)  
      .margin(2)  
      .fontSize(14).letterSpacing(2).fontColor(Color.White)  
      .backgroundColor("#FDE2C6")  
      .borderRadius(4)  
  }else{  
    Text('助教').padding(2)  
      .margin(2)  
      .fontSize(14).letterSpacing(2).fontColor(Color.White)  
      .backgroundColor("#FDE2C6")  
      .borderRadius(4)  
  }  
  // 用户名  
  Text(this.item.name + ':').fontSize(16).fontColor('#999999')  
  // 文本内容  
  Text(this.item.content).fontSize(16).fontColor('#1a1a1a')  
}

2024-10-28 16:30:21

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Text组件下面的Span元素之间如何设置间距？

订阅鸿蒙技术特刊，精选内容抢先看