Alignment#

The Alignment type defines how to position content within a view’s frame, mirroring the behavior of SwiftUI’s built-in alignments. By applying an Alignment value, you can control where elements will be placed if they have extra space or need to align in a specific way.

Overview#

Alignment is useful when you have containers like VStack, HStack, ZStack, or any layout that involves stacking, layering, or positioning multiple views. By choosing an alignment, you tell the layout system how to position these views relative to each other or their container.

For example, a ZStack with a topLeading alignment will place its content toward the top-left corner of the container, while a bottomTrailing alignment puts it toward the bottom-right corner.

Available Alignments#

• Basic Alignments:

  • top: Aligns content along the top edge.
  • center: Centers content both horizontally and vertically.
  • bottom: Aligns content along the bottom edge.
  • leading: Aligns content along the leading edge (left side in left-to-right languages).
  • trailing: Aligns content along the trailing edge (right side in left-to-right languages).

• Compound Alignments:

  • topLeading: Aligns content at the top and leading edges.
  • topTrailing: Aligns content at the top and trailing edges.
  • bottomLeading: Aligns content at the bottom and leading edges.
  • bottomTrailing: Aligns content at the bottom and trailing edges.

• Text Baseline Alignments: Baseline alignments are useful when arranging text-containing views so their text aligns at a common baseline.

  • centerFirstTextBaseline
  • centerLastTextBaseline
  • leadingFirstTextBaseline
  • leadingLastTextBaseline
  • trailingFirstTextBaseline
  • trailingLastTextBaseline

Example Usage#

Center Alignment

1<ZStack alignment="center">
2  <Rectangle fill="gray" frame={{width: 100, height: 100}} />
3  <Text font="title">Centered Text</Text>
4</ZStack>

In this example, the Text will be centered within the Rectangle.

Top Leading Alignment

1<ZStack alignment="topLeading">
2  <Rectangle fill="gray" frame={{width: 200, height: 200}} />
3  <Text>I'm at the top-left!</Text>
4</ZStack>

Here, the Text appears in the top-left corner of the gray rectangle.

Baseline Alignment with HStack

1<HStack alignment="leadingFirstTextBaseline">
2  <Text font="largeTitle">Big Title</Text>
3  <Text font="title">Smaller Subtitle</Text>
4</HStack>

This aligns the two texts so that their first lines of text share a baseline, keeping them visually aligned even though they’re different sizes.

Summary#

Alignment gives you fine-grained control over how content is positioned within a container. By selecting the appropriate alignment—whether it’s a basic edge-based alignment or a more advanced text-baseline alignment—you ensure your UI elements look visually coherent and intuitive.