HarmonyOS 图片标签穿插于多行文字中如何实现?

图片标签穿插于多行文字中如何实现?

HarmonyOS 图片标签穿插于多行文字中如何实现?-鸿蒙开发者社区

HarmonyOS
2024-10-22 11:02:50
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以在text组件里使用ImageSpan

demo参考:

@Entry  
@Component  
  
struct Index {  
  build() {  
    Column() {  
      Row(){  
        Text() {  
          ImageSpan($r('app.media.startIcon')).width(40).height(20).margin({right:5})  
          ImageSpan($r('app.media.app_icon')).width(40).height(20)  
          Span('设置文本的文本行高,设置值不大于0时,不限制文本行高')  
            .fontSize('20fp')  
            .fontColor(Color.Black)  
        }.maxLines(2)  
      }  
.alignItems(VerticalAlign.Top)  
    }.width('70%').margin(10).alignItems(HorizontalAlign.Start)  
  }  
}

可以给ImageSpan 设置。

verticalAlign(ImageSpanAlignment.CENTER)

文档参考:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-containerspan-V5#textbackgroundstyle对象说明

边框你可以直接给ImageSpan设置boder就可以。

@Component  
@Entry  
struct Index {  
  build() {  
    Column() {  
      Text() {  
        ContainerSpan() {  
          ImageSpan($r('app.media.app_icon'))  
            .width('40vp')  
            .height('40vp')  
            .verticalAlign(ImageSpanAlignment.CENTER)  
            .border({width:{right:3},color:Color.Red})  
          Span('抗裂沙浆地方').fontSize('16fp').fontColor(Color.White)  
        }.textBackgroundStyle({color: "#7F007DFF", radius: "12vp"})  
      }  
    }.width('100%').alignItems(HorizontalAlign.Center).margin(10)  
  }  
}

自定义组件,可根据业务需要封装组件,看是否满足需求,demo参考:

@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'  
    })  
  }  
}  
@Entry  
@Component  
struct tagsTest {  
  build() {  
    Row() {  
      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",  
  }  
}

参考demo。

import measure from '@ohos.measure';  
  
function computeTextIndent(text:string):string{  
  const sizeOptions:SizeOptions = measure.measureTextSize({  
    textContent: text,  
    fontSize: '10px'  
  });  
  let width = sizeOptions.width;  
  if(typeof width === 'string'){  
    return width.slice(0,width.length-2) + 10 + 'vp';  
  }  
  if(typeof width === 'number'){  
    return width + 10 + 'vp';  
  }  
  return 0 + 'vp';  
}  
@Entry  
@Component  
struct tagsTest {  
  build() {  
    Column() {  
      Row() {  
        Tags({ tagsText: '新品新品', tagsType: 'newProduct' })  
          .position({ x: 0, y: 2 })  
        Text('这里是标题这里是标题这里是标题这里是标题这里是标题这里是标题这里是标题')  
          .maxLines(2)  
          .textIndent(computeTextIndent('新品新品'))  
          .textOverflow({ overflow: TextOverflow.Ellipsis })  
      }  
      .width('150vp')  
  
      Flex({ direction: FlexDirection.Row,wrap: FlexWrap. Wrap}) {  
        Tags({ tagsText: '额外5倍积分', tagsType: 'bonusPoint', isFront: true, frontIcon: 'app.media.icon' })  
          .margin({ right: '5vp' })  
        Tags({ tagsText: '33.1元', tagsType: 'saveMoney', isFront: true, frontText: '省' })  
        Tags({ tagsText: '333333333333333.1元', tagsType: 'saveMoney', isFront: true, frontText: '省' })  
      }  
      .width('150vp')  
    }  
    .height('100%')  
    .alignItems(HorizontalAlign.Start)  
  }  
}
分享
微博
QQ
微信
回复
2024-10-22 17:51:06
相关问题
多行文字后面添加标签
274浏览 • 1回复 待解决
HarmonyOS Text多行文本不能居中对齐
662浏览 • 1回复 待解决
多行文本省略的展开与显示
1201浏览 • 1回复 待解决
如何实现多行输入,你知道吗?
1909浏览 • 1回复 待解决
HarmonyOS 图片+文字排列问题
55浏览 • 1回复 待解决
HarmonyOS如何实现文字轮播效果?
476浏览 • 1回复 待解决
如何实现标签随文本换行
1084浏览 • 1回复 待解决
HarmonyOS 如何实现文本包含图片
406浏览 • 1回复 待解决
HarmonyOS 如何实现文字描边效果
430浏览 • 0回复 待解决
HarmonyOS 如何实现文字渐变色效果
36浏览 • 1回复 待解决