SwiftUI Cheat Sheet

Table of Contents

1. Image views
2. Text label
3. Lists
4. ForEach
5. Stack views
   1. Vertical Stack (VStack)
   2. Horizontal Stack (HStack)
   3. Z Stack (ZStack)
6. Scroll Views
   1. Vertical Scrolling View
   2. Horizontal Scrolling View
7. Navigation Stack

Image views

// Shows an Image with an image named “Name” 
// Image should be imported into Assets.xcassets 
// prior to referencing the image by name 
Image("Name")
	.resizable() // Allows the image to be resized
	.aspectRatio(contentMode: .fit) // Maintan aspect ratio

Text label

Text(“Large Title”) 
	.font(.largeTitle) // Change preset font size
	.fontWeight(.bold) // Change the font weight
	.foregroundColor(.blue) // Change the text color

Lists

// Showing a list of Identifiable object 
List(restaurants) { restaurant in 
	Text(restaurant.name)
}
 
// Showing a list of non-identifiable objects 
let words = ["Hello", "World"]
List(words, id: \.self) { word in
	Text(word)
}

ForEach

// Iterating over an Identifiable sequence 
ForEach(restaurants) { restaurant in
	Text(restaurant.name)
	}
 
// Iterating over a non-identifiable sequence
ForEach(words, id: \.self) {word on
	Text(word)
	}

Stack views

Vertical Stack (VStack)

VStack {
	Text("Hello") // Shows on top
	Text("World") // Shows at the bottom of Hello
}

Horizontal Stack (HStack)

HStack {
	Text("Hello") // Shows at the left
	Text("World") // Shwos right of Hello
}

Z Stack (ZStack)

ZStack {
	Image("1") // Image at the backslash
	Text("Hello") // Text in front
}

Scroll Views

Vertical Scrolling View

ScrollView {
	VStack {
		ForEach(restaurants) { restaurant in
		Text(restaurant.name)
		}
	}
}

Horizontal Scrolling View

ScrollView {
	HStack {
		ForEach(recipe) { recipe in
		Image(recipe.photo)
		}
	}
}

Navigation Stack

NavigationStack {
	List(restaurants) {restaurant in
		NavigationLink(restaurant.name, value: restaurant)
	}
	.navigationDestination(for: Restaurant.self) { restaurant in
		RestaurantDetails(restaurant)
	}
}