As I continue to work on Mod 5, I find Xcode does not work as expected. In the Mod, we are building an app to allow the user to access lessons and tests for those lessons. All we have done so far is set up two views. The HOME VIEW ROW has a set up for displaying a card in the HOME VIEW.
The problem comes when I try to preview the HomeView. The cards do not appear at all. So here are the my code and Chris’ code for both views, as well as the screen shots showing how the views should look.
Here are the codes for HomeViewRow.
Mine:
import SwiftUI
struct HomeViewRow: View {
var image: String
var title: String
var description: String
var count: String
var time: String
var body: some View {
ZStack{
Rectangle()
.foregroundColor(.white)
.cornerRadius(25, antialiased: true)
.aspectRatio(CGSize(width: 335, height: 175), contentMode: .fit)
.shadow(radius: 10)
//learning card
HStack {
//Image
Spacer()
Image(image)
.resizable()
.frame(width: 116, height: 116)
.clipShape(Circle())
Spacer()
//text
VStack(alignment: .leading) {
//headline
Spacer()
Text(title)
.bold()
.font(.title)
.padding(.bottom, 5)
//description
Text(description)
.bold()
.font(.headline)
Spacer()
//icons
HStack(spacing: 10){
// # of lessons/questions
Image(systemName: "text.book.closed")
.frame(width: 15, height: 15)
Text(count)
.bold()
.font(.caption)
// time
Image(systemName: "clock")
.frame(width: 15, height: 15)
Text(time)
.bold()
.font(.caption)
}
Spacer()
}
.aspectRatio(CGSize(width: 200,
height: 175), contentMode: .fit)
Spacer()
}
.padding(.horizontal, 20)
}
}
}
struct HomeRowView_Previews: PreviewProvider {
static var previews: some View {
HomeViewRow(image: “swift”, title: “Learn Swift”, description: “some description”, count: “10 Lessons”, time: “2 Hours”)
}
}
Chris’:
import SwiftUI
struct HomeViewRow: View {
var image: String
var title: String
var description: String
var count: String
var time: String
var body: some View {
ZStack {
Rectangle()
.foregroundColor(.white)
.cornerRadius(10)
.shadow(radius: 5)
.aspectRatio(CGSize(width: 335, height: 175), contentMode: .fit)
HStack {
// Image
Image(image)
.resizable()
.frame(width: 116, height: 116)
.clipShape(Circle())
Spacer()
// Text
VStack (alignment: .leading, spacing: 10) {
// Headline
Text(title)
.bold()
// Description
Text(description)
.padding(.bottom, 20)
.font(.caption)
// Icons
HStack {
// Number of lessons/questions
Image(systemName: "text.book.closed")
.resizable()
.frame(width: 15, height: 15)
Text(count)
.font(Font.system(size: 10))
Spacer()
// Time
Image(systemName: "clock")
.resizable()
.frame(width: 15, height: 15)
Text(time)
.font(Font.system(size: 10))
}
}
.padding(.leading, 20)
}
.padding(.horizontal, 20)
}
}
}
struct HomeViewRow_Previews: PreviewProvider {
static var previews: some View {
HomeViewRow(image: “swift”, title: “Learn Swift”, description: “some description”, count: “10 Lessons”, time: “2 Hours”)
}
}
and codes for HomeView:
Mine:
import SwiftUI
struct HomeView: View {
@EnvironmentObject var model: ContentModel
var body: some View {
NavigationView {
VStack (alignment: .leading) {
Text("What do you want to do today?")
.padding(.leading, 20)
ScrollView {
LazyVStack {
ForEach(model.modules) { module in
VStack (alignment: .leading, spacing: 20) {
// Learning Card
HomeViewRow(image: module.content.image, title: "Learn \(module.category)", description: module.content.description, count: "\(module.content.lessons.count) Lessons", time: module.content.time)
// Test Card
HomeViewRow(image: module.test.image, title: "\(module.category) Test", description: module.test.description, count: "\(module.test.questions.count) Questions", time: module.test.time)
}
}
}
.padding()
}
}
.navigationTitle("Get Started")
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
HomeView().environmentObject(ContentModel())
}
}
Chris’:
import SwiftUI
struct HomeView: View {
@EnvironmentObject var model: ContentModel
var body: some View {
NavigationView {
VStack (alignment: .leading) {
Text("What do you want to do today?")
.padding(.leading, 20)
ScrollView {
LazyVStack {
ForEach(model.modules) { module in
VStack (spacing: 20) {
// Learning Card
HomeViewRow(image: module.content.image, title: "Learn \(module.category)", description: module.content.description, count: "\(module.content.lessons.count) Lessons", time: module.content.time)
// Test Card
HomeViewRow(image: module.test.image, title: "\(module.category) Test", description: module.test.description, count: "\(module.test.questions.count) Lessons", time: module.test.time)
}
}
}
.padding()
}
}
.navigationTitle("Get Started")
}
}
}
struct HomeView_Previews: PreviewProvider {
static var previews: some View {
HomeView()
.environmentObject(ContentModel())
}
}
ans Screenshots:
