SwiftUI Stacks

Stacks are essential views that control the layout of elements in an app. This includes the HStack, VStack, and ZStack, as well as Lazy Stacks.

Basic Code Examples

HStack {
  Text("Hello world!")
  Image(systemName: "circle")
}

VStack {
  Text("Hello world!")
  Image(systemName: "circle")
}

ZStack {
  Text("Hello world!")
  Image(systemName: "circle")
}

There are three main types of Stacks shown above.

The HStack in line 1 creates a layout for the child views/elements to appear next to one another horizontally.

Similarly, the VStack in line 6 creates a vertical layout for child views/elements to appear in a vertical format.

Finally, the ZStack in line 11 creates a layout for the child views/elements to appear on top of one another, which can be used for adding backgrounds to views.

Alignment of Stacks

HStack (alignment: bottom) {
  Text("Hello world!")
  Image(systemName: "circle")
}

VStack (alignment: leading) {
  Text("Hello world!")
  Image(systemName: "circle")
}

HStack takes in an alignment parameter of type VerticalAlignment, which includes bottom, center, and top. The example in line 1 would align all the elements in the stack at the bottom of the HStack view.

VStack takes in an alignment parameter of type HorizontalAlignment, which includes leading, center, and trailing. The example in line 6 would align all the elements in the VStack to the left of the VStack view.

Spacing between Children Elements

HStack (spacing: 20) {
  Text("Hello world!")
  Image(systemName: "circle")
}

VStack (spacing: 100) {
  Text("Hello world!")
  Image(systemName: "circle")
}

Both the HStack and VStack take in a spacing parameter, which add spacing to separate each child view/element in the stack. The size of the spacing is determined by the integer passed in.

Lazy Stacks

LazyHStack {
  ForEach(0..<100) { index in 
    Text("\(index)")
  }
}

LazyVStack {
  ForEach(0..<100) { index in 
    Text("\(index)")
  }
}

Finally, LazyStacks are a different type of Stacks which are useful if your app content goes beyond the screen size (ex. a scrollable list). LazyStacks will only load views that are within the screen, rather than having to load everything in the Stack at once.

Note that Stacks are not inherently scrollable, and can be wrapped with views such as a ScrollView to add scrolling.