Implementing a background color

For the background, we will go into the body computed property. This is where we add our views that will be seen on the screen by the user. The first thing we want to add is a ZStack; this is the main stack that’s going to hold all of the views:

var body: some View {
      ZStack {
             }
      }

The reason we use the ZStack versus an HStack or a VStack is we want the views stacked on each other, so they appear as only one view, and later we will animate them separately with different modifiers.

Inside the ZStack, let’s set a black background for the screen by using the .foregroundColor modifier, and specify the color to use; we will use black in this case:

Rectangle() 
.foregroundColor(Color.black)

The following figure shows the result of that code:

Figure 3.1: Adding...