Transcript

We’ve learned some basics of Swift and some fundamental SwiftUI objects. Unfortunately what we’ve done as a demo doesn’t look so nice. So let’s get together the beginnings of a fun app to order pizza!

I’ll start by closing our current app.

Then I’ll make a new app. I’ll  pop out for a second and rename it Huli Pizza Takeout. I’ll make the accent color green this time. 

Inside the app I’ll change the name as we did before to Huli Pizza Takeout. 

Go to content view, and cut the Text, then paste it on top of the image. 

Change the code to this: 

VStack {
    Text("Huli Pizza Company")
       .font(.largeTitle).bold()
    Image(systemName:"rectangle.fill")
        .imageScale(.large)
        .font(.largeTitle)
}

And we get a different looking app. We have yet to talk about the keyword VStack

VStack is a special object that take code as its parameter. We call these closures. You denote a closure by a code block made of at least  a set of curly brackets. You’ll find code blocks in many places in Swift. The code block of  VStack appears in order Swift UI Views to be displayed vertically. Here we display text then an image, in this case a rectangle. 

Add another View to the stack  

Divider()

Dividers make lines. We’ve seen Spacer before. Spacers has a role of pushing all content in a direction. They fill up all available space. If I put a Spacer at the end of the code block 

Spacer()

It pushes everything to the top. 

We can change the background color of the stack with this modifier added after the code block. 

.background(Color.accentcolor)

There’s another common stack you can use for horizontal arrangement. The HStack arranges views horizontally. As stacks are themselves Views you can have stacks inside their stacks. For example,  below the Divider add this

HStack{
                Image(systemName: "circle.fill")
                Text("menuItem").font(.title)      
            }
            

I have the image and text in stack going from a leading edge to a trailing one. Notice I did not say left to right, because that can change with some languages such as Arabic and Hebrew

Add a Spacer to align to the left. 

Spacer()

You can nest these a deep as you want. I’ll add another VStack to add a description under the Menu Item, so I’ll encompass the Menu Description in the code block. 

VStack(){
    Text("menuItem").font(.title)
    Text("menu Description")
}

This is still centered. I’d have to use more spacer to get it left aligned. Fortunately HStack and VStack have alignment parameters for the alignment at right angles to their direction. For VStack, that means I can align to the leading edge. 

VStack(alignment:.leading){

This is looking good. We’ve built a wireframe for our app. Wire frames are common in app development, where developers use place markers like circles rectangles and a few place marker words to develop the look without worrying about the content.  

There’s usually more than one menu Iten on a menu though, and in our next lesson, we’ll look at a way we can get more Menu Items on to our app. 

The Whole Code

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Huli Pizza Company")
                .font(.largeTitle).bold()
            Image(systemName: "rectangle.fill")
                .imageScale(.large)
                .font(.largeTitle)
                .foregroundColor(Color.black)
            Divider()
            HStack{
                Image(systemName: "circle.fill")
                VStack(alignment:.leading){
                    Text("Menu Item")
                    Text("Menu Description")
                }
                Spacer()
            }
            Spacer()
        }
        .background(Color.green)
    }
}