HarmonyOS Text/Span使用问题

一段文本，前面有不定个数的标签，标签有的是带文字带边框、有的是图片，标签可能换行展示，应该如何实现？

标签个数不固定，图片宽度不确定，目前直接用Span和ImageSpan实现，但是Span无法实现带边框的标签，只能是背景颜色充满且无法设置标签大小。

HarmonyOS

superinsect

2024-09-24 11:09:36

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

目前无类似功能，支持自定义组件，可根据业务需要封装组件

参考demo：

//自定义组件Tags  
@Component  
struct Tags {  
  @Prop tagsText: string;  
  @Prop tagsType: string;  
  @Prop isFront: boolean = false;  
  @Prop frontText: string;  
  @Prop frontIcon: string;  
  @State TagsOptions: TagsInterface = {};  
  
  aboutToAppear(){  
    let tagsColor:TagsColor = {};  
    Object.entries(TagsTypeOption).forEach((item:[string,TagsColor])=>{  
      if(item[0] === this.tagsType){  
        tagsColor = item[1];  
      }  
    })  
    this.TagsOptions = {  
      text:this.tagsText,  
      frontText:this.frontText,  
      frontIcon:this.frontIcon,  
      tagsColor:tagsColor  
    }  
  }  
  
  build() {  
    Row() {  
      if (this.isFront) {  
        if(this.TagsOptions.frontText){  
          Text(this.TagsOptions.frontText)  
            .fontColor(this.TagsOptions.tagsColor?.color)  
            .fontSize('10vp')  
            .height('16vp')  
            .padding('2vp')  
            .backgroundColor(this.TagsOptions.tagsColor?.frontBgColor)  
            .border({  
              width: { right: '1vp', left:'0vp', top:'0vp', bottom:'0vp' },  
              color: this.TagsOptions.tagsColor?.borderColor,  
            })  
        }  
        if(this.TagsOptions.frontIcon){  
          Image($r(this.TagsOptions.frontIcon))  
            .size({ width: '14vp', height: '14vp' })  
            .padding('2vp')  
            .backgroundColor(this.TagsOptions.tagsColor?.frontBgColor)  
            .border({  
              width: { right: '1vp', left:'0vp', top:'0vp', bottom:'0vp' },  
              color: this.TagsOptions.tagsColor?.borderColor,  
            })  
        }  
      }  
      Text(this.TagsOptions.text)  
        .fontColor(this.TagsOptions.tagsColor?.color)  
        .fontSize('10vp')  
        .height('16vp')  
        .padding('2vp')  
        .backgroundColor(this.TagsOptions.tagsColor?.bgColor)  
  
    }  
    .height('16vp')  
    .border({  
      width: '1vp',  
      color: this.TagsOptions.tagsColor?.borderColor,  
      radius: '2vp'  
    })  
  }  
}

页面使用demo：

@Entry  
@Component  
struct tagsTest {  
  build() {  
    Row() {  
      Tags({tagsText:'新品',tagsType:'newProduct'})  
        .margin({  
          right:'5vp'  
        })  
      Tags({tagsText:'额外5倍积分',tagsType:'bonusPoint',isFront:true, frontIcon:'app.media.icon'})  
        .margin({  
          right:'5vp'  
        })  
      Tags({tagsText:'3.1元',tagsType:'saveMoney',isFront:true, frontText:'省'})  
    }  
    .height('100%')  
    .justifyContent(FlexAlign.Center)  
  }  
}  
  
class TagsInterface {  
  text?:string  
  frontText?:string  
  frontIcon?:string  
  tagsColor?:TagsColor  
}  
class TagsColor{  
  bgColor?:string  
  borderColor?:string  
  color?:string  
  frontBgColor?:string  
}  
  
class TagsType{  
  newProduct?:TagsColor  
  bonusPoint?:TagsColor  
  saveMoney?:TagsColor  
}  
  
const TagsTypeOption:TagsType = {  
  newProduct: {  
    bgColor: "#00af3b",  
    borderColor: "#00af3b",  
    color: "#ffffff",  
    frontBgColor: "",  
  },  
  bonusPoint:{  
    bgColor: "#feffff",  
    borderColor: "#fa8027",  
    color: "#f2c5a0",  
    frontBgColor: "#fff7f4",  
  },  
  saveMoney:{  
    bgColor: "#feffff",  
    borderColor: "#ffdada",  
    color: "#ff0005",  
    frontBgColor: "#ffeded",  
  }  
}

可以试一下用onAreaChange方法来获取图标的宽度。

2024-09-24 17:51:00

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Text/Span使用问题

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