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

@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)  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

verticalAlign(ImageSpanAlignment.CENTER)
1.

@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)  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

@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",  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.

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)  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.