HarmonyOS 多个文本组合展示？

Question

我想实现图片红框标记的效果，textDemo里用span实现，无法绘制边框和设置间距，用flex实现，换行效果满足不了需求，能否提供下这种样式的解决方案？

Answer 1

目前span无法单独设置边框，但是可以配合Stack使用，并通过给Text设置lineHeight属性来设置间距，看能否满足您的需求

可参考：

@Builder
  spanBuilder() {
    Stack({ alignContent: Alignment.TopStart }) {
      Text() {
        Span('TextSpan实现无法绘制边框名字很长很长很长长长很长很长长长字符 ')
          .fontSize('32lpx')
          .fontColor(Color.Black)
          .fontWeight(FontWeight.Medium)

        Span('20μg')
          .fontSize('32lpx')
          .fontColor('#484848')// 间距不起作用
          .margin({ left: '16lpx' })

        Span('免费')
          .fontSize('22lpx')
          .fontColor('#484848')// 间距不起作用
          .margin({ left: '16lpx' })
          .border({
            width: 1,
            color: '#F4802E',
            radius: '4lpx'
          })
      }
      .height('100%')
      .lineHeight(50)
    }
  }

Stack详细可参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-stack-layout-V5

lineHeight属性：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5\#属性