HarmonyOS Span无法设置padding，渐变？

Question

如图所示，使用Text 和 Span组合，Span无法实现设置padding ，也无法实现渐变色

Answer 1

span规格上不直接支持padding和margin，自绘制方式实现：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-styled-string-V5\#示例6设置自定义绘制span

文字背景参考方案：span组件设置border不生效，可考虑使用text配合stack，以及配合测量文字宽度实现

@Entry
@Component
struct Example {
  build() {

    Stack({ alignContent: Alignment.TopStart }) {

      Text('一二三一二三一二三一二三一二三一二三一二三一二三')
      .fontSize(30)
        .backgroundColor(Color.Blue)
        .textIndent(20 + 150)
        .width(300)

      Text('spansssss')
      .fontSize(20)
        .width(150)
        .margin({ left: 10 })
        .padding({ left: 10 })
        .border({ width: 5, color: Color.Black, radius: 10})
        .backgroundColor(Color.Yellow)
    }

  }
}

渐变色背景可以参考：

// 渐变背景demo:尝试stack组件
@Entry
@Component
struct ColorGradientExample {
  build() {
    Stack() {
      Row()
        .width('90%')
        .height(50)
        .linearGradient({
          direction: GradientDirection.Left, // 渐变方向
          repeating: true, // 渐变颜色是否重复
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
        })

      Text() {
        Span('linearGradient Repeat')
      }.fontSize(20).width('90%').fontColor(Color.White)
    }
    .width('100%')
  }
}