如何实现类型标题打标的功能

如何实现类型标题打标的功能。

HarmonyOS
2024-09-23 13:41:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

支持自定义组件,可根据业务需要封装组件

参考demo:

//自定义组件Tags  
@Component  
export default 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'  
    })  
  }  
}  
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",  
  }  
}

页面使用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)  
  }  
}
分享
微博
QQ
微信
回复
2024-09-23 17:22:23
相关问题
HarmonyOS如何建立多目标的工程呢
307浏览 • 1回复 待解决
HarmonyOS 如何release包
13浏览 • 1回复 待解决
如何编写 nginx 的 dockerfile 文件?
2889浏览 • 1回复 待解决
如何配置桌面图标的快速启动图标
1688浏览 • 1回复 待解决
如何编写 nginx 的 dockerfile 文件?
3841浏览 • 1回复 待解决
HarmonyOS 分享功能如何实现
167浏览 • 1回复 待解决
Grid如何实现拖拽功能
2606浏览 • 1回复 待解决
定时提醒功能如何实现?
4976浏览 • 1回复 待解决
鸿蒙如何实现分享功能
17597浏览 • 2回复 待解决
有那种公共的标题返回的标题控件吗
1729浏览 • 1回复 待解决
如果要实现插槽功能如何实现
359浏览 • 1回复 待解决
求大佬告知如何实现联合类型
665浏览 • 1回复 待解决
grid如何怎么实现拖拽功能
831浏览 • 1回复 待解决
如何实现Fraction懒加载功能
7384浏览 • 1回复 待解决
如何实现类似插槽的功能
1915浏览 • 1回复 待解决
如何实现文本展开收起功能
827浏览 • 1回复 待解决