HarmonyOS Text组件里的Span标签不支持padding与border？

Question

我们的收货地址文本前面有可维护的分组文本tag，需要作出如下方截图中的效果，使用了Text组件嵌套Span组件，但是Span组件不支持border与padding，希望能支持下 或者 其他替代方案可以实现如设计稿中的视觉效果

Answer 1

参考示例：

@Entry
@Component
struct TextSpanTag {
  @State Text1Width: number = 0
  @State Text2Width: number = 0

  build() {
    Column() {
      Row() {
        Text('8888新')
          .fontSize(12)
          .fontColor("#ff0000")
          .borderColor("#ff0000")
          .borderWidth('1vp')
          .position({ x: 0, y: 2 })
          .padding({ top: '1vp', bottom: "1vp", left: "8vp",right: '8vp' })
          .margin({ right: '5vp' })
          .borderRadius('2vp')
          .onAreaChange((oldValue, newValue: Area) => {
            this.Text1Width = Number(newValue.width)
            console.log("TextWidth",this.Text1Width)
          })
        Text('家')
          .fontSize(12)
          .fontColor("#ffffff")
          .backgroundColor("#ff0000")
          .position({ x: this.Text1Width + 5, y: 2 })
          .padding({ top: '2vp', bottom: "2vp", left: "8vp",right: '8vp' })
          .margin({ right: '5vp' })
          .borderRadius('2vp')
          .onAreaChange((oldValue, newValue: Area) => {
            this.Text2Width = Number(newValue.width)
            console.log("TextWidth",this.Text2Width)
          })
        Text('这里是标题这里是标题这里是标题这里是标题这里是标题这里是标题这里是标题')
          .textIndent(this.Text1Width + 5 + this.Text2Width + 5) //2个Text宽度+右边距
          .lineHeight('22vp')
      }
      .width('100%')
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
}