How to lay out components

SwiftUI uses three basic layout components – VStack, HStack, and ZStack. VStack is a view that arranges its children in a vertical line, HStack arranges its children in a horizontal line, and ZStack arranges its children by aligning them with the vertical and horizontal axes.

We will also take a look at how spacers and dividers can be used for layout.

Getting ready

Let's start by creating a new SwiftUI project with Xcode, calling it TheStacks. Use the following steps:

1. Start the Xcode program.
2. Click on Create a new Xcode project from the left pane.
3. Leave the default selected application, Single View App. Click Next.
4. In the project options menu, make sure SwiftUI is selected instead of storyboard.
5. Enter the product name, TheStacks.
6. Select the folder location to store the project and click Create.

How to do it…

1. Replace Text in ContentView with a vertical stack containing three elements:

   struct...