You have added a single text view to the screen of your project. Now you'll learn how to add multiple text views and combine them. When using storyboards, you can combine multiple views by embedding them in a stack view. In SwiftUI, you combine and embed them in stacks, which are similar to stack views in storyboards. Like stack views, you can group views horizontally or vertically.

The original Restaurant Detail screen for the Let's Eat app shows the address of the restaurant, so you'll use a horizontal stack view to place the restaurant's address and city below the restaurant name. Perform the following steps:

1. command + click the text view's initializer to show the structured editing popover, then choose Embed in VStack:

2. Note the code has been modified, and now looks like this:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("The Tap Trailhouse")
                .font(.title)
        }
    }
}

3. Open the Object library by clicking the + button.
4. Type text in the filter field. A Text object appears in the results.

5. Drag the Text object to the place in your code immediately after the The Tap Trailhouse text view:

6. Your code should look like this. Note the addition of a new text view:

VStack {
    Text("The Tap Trailhouse")
        .font(.title)
    Text("Placeholder")
}

7. The Preview area should look like this:

8. Modify your code by replacing the new text view's placeholder text with 17 Union Street, which is the address of The Tap Trailhouse:

 VStack {
     Text("The Tap Trailhouse")
         .font(.title)
     Text("17 Union St")
 }

9.  Set the address's font style to .subheadline by modifying the code as shown:

VStack {
    Text("The Tap Trailhouse")
        .font(.title)
    Text("17 Union St")
        .font(.subheadline)
}

10. Edit the VStack initializer to align the views by their leading edges as shown:

VStack(alignment: .leading) {
    Text("The Tap Trailhouse")
        .font(.title)
    Text("17 Union St")
        .font(.subheadline)
}

11. The Preview area reflects the changes:

Next, you'll add another text view to the right of the location; this is for the city the restaurant is located in.

12. In the canvas, hold command + click on 17 Union St, and choose Embed in HStack:

13. The code in ContentView.swift reflects the changes:

VStack(alignment: .leading) {
    Text("The Tap Trailhouse")
        .font(.title)
    HStack {
        Text("17 Union St")
            .font(.subheadline)
    }
}

14. Modify the code as shown to add a new text view after the address, change the placeholder text to Boston, and set its font to .subheadline:

VStack(alignment: .leading) {
    Text("The Tap Trailhouse")
    .font(.title)
    HStack {
        Text("17 Union St")
            .font(.subheadline)
        Text("Boston")
            .font(.subheadline)
    }
}

15. Note the Preview area shows the city next to the address:

16. Modify the code as shown by adding Spacer() between the restaurant's address and city. A spacer expands as required to make its containing view use all of the space of its parent view:

VStack(alignment: .leading) {
    Text("The Tap Trailhouse")
    .font(.title)
    HStack {
        Text("17 Union St")
        .font(.subheadline)
        Spacer()
        Text("Boston")
        .font(.subheadline)
    }
}

17. Note the Preview area shows the restaurant name, address, and city at the extreme edges of the screen:

18. To add space between the text views and the sides of the screen, modify the code as shown to use the padding() modifier method:

VStack(alignment: .leading) {
    Text("The Tap Trailhouse")
    .font(.title)
    HStack {
        Text("17 Union St")
        .font(.subheadline)
        Spacer()
        Text("Boston")
        .font(.subheadline)
    }
}
.padding()

19. The Preview area now looks like this:

You have combined text views using vertical and horizontal stacks, and now you can see the restaurant address and city below the name. Now let's see how to add a picture of the restaurant and customize its appearance using modifiers in the next section.