Laying out components

SwiftUI uses three basic layout components, VStack, HStack, and ZStack. Use the VStack view to arrange components in a vertical axis, HStack to arrange components in a horizontal axis, and—you guessed it right—use the ZStack to arrange components along the vertical and horizontal axis.

In this recipe, we will also look at spaces and adjust the position used to position elements. We will also look at how Spacer and Divider can be used for layout.

Getting ready

Let's start by creating a new SwiftUI project called TheStacks. Use the following steps:

1. Start Xcode (Finder -> Applications -> Xcode).
2. Click on Create a new Xcode project from the left pane.

   Select iOS, and then App. Click Next.

3. In the Interface menu, make sure SwiftUI is selected instead of storyboard.
4. Enter the Product Name, TheStacks.
5. Select the folder location to store the project and click Next.

How to do it…

Let's implement...