Span layout attribute is invalid under Text component

Read the original article：Span layout attribute is invalid under Text component

Problem description

When a Span component is nested in a Text component , setting the layout properties of the Span component will fail. For example, the following code is intended to hide the first Span component and set the third Span component 50vp away from the left:

Text() {
  Span("aaaaa").visibility(Visibility.Hidden)
  Span("bbbbb")
  Span("ccccc").margin({left: 50})
}

But the actual effect is that all layout attributes are ineffective and the contents are connected together.

Background knowledge

The Span component is a subcomponent of the Text component. When multiple strings are concatenated, the Span component is often used to implement it. However, the properties of the Span component are not as rich as those of the Text component. It has the following characteristics:

1. The Span component does not support margin and padding attributes. As a subcomponent of the Text component, Span only supports "text common attributes" but not "common attributes".
2. Span can inherit the properties of the parent component Text. The properties that support inheritance only include: fontColor, fontSize, textShadow, etc. Please refer to Span properties for details .

Solution

When the Text component is used with the Span component, only common text properties can be set. If you need to achieve the layout effect of the Span component, it is recommended to use other alternatives such as the Row and Text components.

For visibility scenarios, you can use variables to control the display of Span:

@State isVisibility:boolean = false

if (this.isVisibility) {
  Span('aaaaa')
}

For setting the margin component spacing scenario, you can use the Row and Text components to implement it:

Row() {
  Text('aaaaa')
  Text("bbbbb")
  Text("ccccc").margin({ left: 50 })
}

For the scenario of setting the padding attribute, you can add spaces before and after the text, or you can control the spacing by adding Span(' '):

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text() {
        // Add spaces before and after the text to control the left and right distance
        Span(' title ')
          .fontSize('20fp')
          .textBackgroundStyle({ color: Color.Green, radius: "5vp" })
          .fontColor(Color.White)
        // Directly increase the space to control the spacing
        Span(' ').letterSpacing(10)
        Span('I am a piece of text I am a piece of text I am a piece of text, I am a piece of text I am a piece of text I am a piece of text, I am a piece of text I am a piece of text')
          .fontSize('20fp')
      }.maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }).width('80%')
    }.width('100%').alignItems(HorizontalAlign.Center)
  }
}

To set the vertical center of the Span text, use the baselineOffset property to set the alignment baseline of the Span component to achieve vertical center alignment of the internal text:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text() {
        ContainerSpan() {
          Span('11111')
            .fontSize(12)
            .baselineOffset(new LengthMetrics(5, LengthUnit.VP))
        }
        .textBackgroundStyle({ color: Color.Green, radius: 3})
        Span(' Hello World !')
          .fontSize(25)
      }
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
  }
}

Written by Egemen Ayhan