HarmonyOS span中如何设置圆角

使用span时设置内部文字的背景圆角无效

分别尝试了containerSpan和直接使用span,都无法在text中给部分文案设置背景,在HarmonyOS中span设置圆角没有效果

代码如下:

Text() { 
 Span(this.TIPS_PREFIX) 
 ContainerSpan() { 
  Span(this.model.getHour(this.remainSeconds.getObj())) 
   .padding(2) 
 }.textBackgroundStyle({ radius: 3, color: Color.White }) 
 
 Span(':') 
 
 Span(this.model.getMinute(this.remainSeconds.getObj())) 
  .border({ color: $r("app.color.FFFFD5C9_FF5B3228"), radius: 3 }) 
  .padding(2) 
 Span(':') 
 Span(this.model.getSecond(this.remainSeconds.getObj())) 
  .border({ color: $r("app.color.FFFFD5C9_FF5B3228"), radius: 3 }) 
  .padding(2) 
 Span(this.TIPS_SUFFIX) 
} 
.fontSize(12) 
.fontColor($r("app.color.FFFF6133")) 
.maxLines(1) 
.textOverflow({ overflow: TextOverflow.Ellipsis }) 
.layoutWeight(1)

HarmonyOS span中如何设置圆角-鸿蒙开发者社区

HarmonyOS
2024-08-29 10:07:07
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

span组件可以通过textBackgroundStyle属性设置圆角,参考文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-span-V5#ZH-CN_TOPIC_0000001893211169__示例3

demo:

index.ets

@Component 
@Entry 
struct Index { 
 build() { 
  Column() { 
   Text() { 
    Span(' Hello World ! ') 
     .fontSize('20fp') 
     .textBackgroundStyle({color: "#7F007DFF", radius: "5vp"}) 
     .fontColor(Color.White) 
   } 
  }.width('100%').margin({bottom: '5vp'}).alignItems(HorizontalAlign.Center) 
 } 
}
分享
微博
QQ
微信
回复
2024-08-29 17:15:10
相关问题
HarmonyOS Span 可以设置padding吗
421浏览 • 1回复 待解决
HarmonyOS WebView 圆角设置失效
104浏览 • 1回复 待解决
HarmonyOS CustomDialog怎么设置圆角
37浏览 • 1回复 待解决
HarmonyOS column设置圆角不起作用
538浏览 • 1回复 待解决
HarmonyOS stack设置圆角不生效
64浏览 • 1回复 待解决
UIAbility是否可以设置圆角
1912浏览 • 1回复 待解决
如何设置分组列表的圆角和间距
1931浏览 • 1回复 待解决
HarmonyOS 怎么设置圆角的渐变边框
25浏览 • 1回复 待解决
HarmonyOS 图片背景及边框圆角设置问题
1030浏览 • 1回复 待解决
HarmonyOS TextSpan显示问题
533浏览 • 1回复 待解决
HarmonyOS Text的ImageSpan和Span
522浏览 • 1回复 待解决
Span组件设置行间距间距
606浏览 • 1回复 待解决
HarmonyOS api10如何给子窗口设置圆角
409浏览 • 1回复 待解决
WebView支持设置WebView圆角吗?
925浏览 • 1回复 待解决