How to Align Different Font Sizes at the Bottom ?

#harmonyos #flexlayout #bottomalignment #textalignment

Read the original article：How to Align Different Font Sizes at the Bottom ?

How to Align Different Font Sizes at the Bottom ?

Problem Description

If a Flex component contains a nested Text component with two paragraphs of text, and the font sizes of the texts are different, how can we achieve the effect of aligning the two paragraphs at the bottom, ensuring that this alignment is maintained even when the content lengthens or the font size decreases?

Background Knowledge

Flex: Flex is a container component that arranges child components in a flexible manner, efficiently aligning and distributing remaining space among child elements.
ContainerSpan: A child component of the Text component, used to uniformly manage the background color and corner radius of multiple Spans and ImageSpans.

Troubleshooting Process

Problem Analysis The issue involves aligning two paragraphs with different font sizes at the bottom within a Flex container, even when content lengthens or font sizes change.
Key Points Verification
- Flex Layout: The Flex component uses justifyContent: FlexAlign.SpaceBetween and alignItems: ItemAlign.End to distribute space and align items.
- Dynamic Content: The @State variable isTrue changes the font size dynamically, affecting the height of the Span components.
Potential Issues
- Dynamic Height: When the font size changes, the Span components' heights vary, disrupting the bottom alignment.
- Container Constraints: The Flex container's height and alignment properties may not adapt properly to dynamic content changes.

Analysis Conclusion

Alignment Issue The FlexAlign.SpaceBetween and ItemAlign.End properties may not consistently align the content at the bottom due to dynamic height changes from font size adjustments.
Core Logic
- Use Flex with justifyContent: FlexAlign.End and alignItems: ItemAlign.End to align items to the end of the container.
- Ensure the Text component's maxLines and flexShrink properties are set appropriately to handle dynamic content.
Applicable Scenarios
- Suitable for dynamic content where alignment needs to adapt to changing font sizes or content length.
- Works well when the Flex container's height is fixed or responsive.
Optimization Recommendations
- Use ItemAlign.End and FlexAlign.End for consistent bottom alignment.
- Test with varying font sizes and content lengths to ensure alignment stability.

Solution

Using Flex layout, the Text component is nested within the Span component to achieve the desired layout. For details, please refer to the following example code:

@Entry
@Component
struct Index {
  @State content: string = 'Content'
  // Set the state variable to control font changes
  @State isTrue: boolean = true

  build() {
    Column() {
      Column() {
        Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.End }) {
          Text() {
            ContainerSpan() {
              Span(this.content) // When isTrue is true, the font size increases; otherwise, it decreases.
                .fontSize(this.isTrue ? 20 : 10)
                .fontColor(Color.Black)
                .fontWeight(FontWeight.Bold)

              Span(this.content)
                .fontSize(10)
                .fontColor(Color.White)
            }
            .textBackgroundStyle({ color: "#7F007DFF" })

            ContainerSpan() {
              Span(this.content)
                .fontSize(15)
                .fontColor(Color.Black)
            }
            .textBackgroundStyle({ color: "#7fffd500" })
          }
          .maxLines(1)
          .minFontSize(1)
          .flexShrink(1)

        }
        .width(200).height(30)
        .borderWidth(1)
        .onClick(() => {

          if (this.content.length >= 6) {
            // When the content length of the Span component is greater than or equal to 6, truncate two characters and set isTrue to true.
            this.content = this.content.slice(0, 2)
            this.isTrue = true
          } else {
            // Otherwise, display the text content and set isTrue to false.
            this.content = `${this.content}Variable length`
            this.isTrue = false
          }
        })
      }
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}Copy codeCopy cod