HarmonyOS Span标签样式问题

期望实现多行文本显示省略号,但是文本开头有个标识,该标识的字体大小、颜色、背景与后面文本不一样。目前使用Text及ContainerSpan来实现,代码如下:

@Entry 
@Component 
export struct textComp { 
  build() { 
    Column(){ 
      Text(){ 
        ContainerSpan(){ 
          Span('  标签  ') 
            .fontSize(12) 
            .fontColor(Color.White) 
        } 
        .textBackgroundStyle({color: '#FE6A00', radius: '5vp'}) 
        Span(' 阿斯顿发生阿斯蒂阿斯顿发生阿斯蒂芬阿什顿阿斯顿发生阿斯蒂芬阿什顿阿斯顿发生阿斯蒂芬阿什顿阿斯顿发生阿斯蒂芬阿什顿阿斯顿发生阿斯蒂芬阿什顿芬阿什顿') 
      } 
      .textOverflow({overflow: TextOverflow.Ellipsis}) 
      .maxLines(2) 
      .lineHeight(24) 
    } 
    .padding(15) 
  } 
}

但是有如下问题:

1、“标签” 文字的左右上下padding无法控制,目前左右使用空格显示间距,上下如果不做任何设置是贴这文字显示,对Text如果设置了lineHeight,“标签”上下会有padding效果,但是上面的间隔始终比下面的大,看文本并没有上下居中。

2、“标签”下背景色ui设计是渐变色。textBackgroundStyle 好像不支持。

期望:

1、对于上述需求是否有其他实现方案。

2、上面写的是否有优化点。

HarmonyOS
2024-08-09 15:58:59
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

参考代码如下:

@Entry 
@Component 
export struct textComp { 
  build() { 
    Column(){ 
      Text('标签') 
        // .fontSize(12) 
        .fontColor(Color.Orange) 
        .backgroundImage($r('app.media.icon_metal_bg')) 
        .position({}) 
        .linearGradient({ 
          angle: 90, 
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 
        }) 
      // .lineHeight(40) 
      // .textBackgroundStyle({color: '#FE6A00', radius: '5vp'}) 
      Text(' 阿斯顿发生阿斯蒂阿斯顿发生阿斯蒂芬阿什顿阿斯顿发生阿斯蒂芬阿什顿阿斯顿发生阿斯蒂芬阿什顿阿斯顿发生阿斯蒂芬阿什顿阿斯顿发生阿斯蒂芬阿什顿芬阿什顿') 
 
        .textOverflow({overflow: TextOverflow.Ellipsis}) 
        .maxLines(2) 
        .lineHeight(24) 
    } 
    .width('100%') 
    .height(500) 
    .padding(15) 
    .backgroundColor(Color.Pink) 
  } 
}
分享
微博
QQ
微信
回复
2024-08-09 17:21:57
相关问题
HarmonyOS 使用Text里套Span标签使用问题
318浏览 • 1回复 待解决
HarmonyOS Text/Span使用问题
441浏览 • 1回复 待解决
HarmonyOS Text中的Span显示问题
533浏览 • 1回复 待解决
HarmonyOS TextInput组件错误样式问题
578浏览 • 1回复 待解决
HarmonyOS CheckBox 自定义样式问题
36浏览 • 1回复 待解决
iframe标签 src内部访问top跨域问题
307浏览 • 1回复 待解决
关于Tabs里面tabBar样式问题
390浏览 • 2回复 待解决
bindPopup样式问题有哪些啊?
439浏览 • 1回复 待解决
HarmonyOS Span 可以设置padding吗
421浏览 • 1回复 待解决
HarmonyOS span中如何设置圆角
471浏览 • 1回复 待解决
HarmonyOS Text中的ImageSpan和Span
522浏览 • 1回复 待解决
怎样实现XML标签标签值的解析?
339浏览 • 1回复 待解决
HarmonyOS Html文本标签解析器
42浏览 • 1回复 待解决
HarmonyOS 如何读取网页中标签数据?
236浏览 • 1回复 待解决