How to Use Alignments in SwiftUI — Z-Stack Alignment

This is the third part in the ‘SwiftUI Layout System’ series and the fifth part in the subseries about ‘How to Use Alignments in SwiftUI’. In this part we will talk about how alignments work along the z-axis in a Z-Stack.

The SwiftUI Layout System

• How to Use the SwiftUI Layout System
• How to Use Stacks in SwiftUI
• How to Use Alignments in SwiftUI
  – The Basics
  – The Alignment Process
  – Custom Alignments
  – Container Expansion using Alignments
  – Z-Stacks Alignment

(More to come …)

Z-Stack Alignment

If you read the previous parts of the series you may have noticed that I used the H-Stack in all of the examples. This has been done on purpose to get you familiar with the fundamentals of the alignment process.

However, we can easily take the concept and apply it to the V-Stack with one exception. The H-Stack uses VerticalAlignment for vertical positioning along the y-axis but for the V-Stack we need to use HorizontalAlignment for horizontal positioning along the x-axis.

But how does this concept apply to a Z-Stack with its views positioned along the z-axis?