I’m just getting started learning SwiftUI, following Apple’s tutorial for building an iOS app at this link. I started with the skeleton app provided and have followed along in the latest Xcode, step by step. Instead of seeing what I am supposed to see, the CardView
displays only a blank white rectangle.
Apple provided a fully built project, which works just fine. I’ve compared the code I built from the skeleton project to the code that comes with the completed project, and they appear identical. Yet my home-built copy of the project simply does not fill in any details in CardView
. No color, text, nor icons, just a blank white rectangle. Other than simply comparing the code to the canned example, I have utterly no idea how to debug this. Any suggestions are welcome.
Here’s the code of CardView.swift:
import SwiftUI
struct CardView: View {
let scrum: DailyScrum
var body: some View {
VStack(alignment: .leading) {
Text(scrum.title).font(.headline)
Spacer()
HStack {
Label("(scrum.attendees.count)", systemImage: "person.3")
.accessibilityElement(children: .ignore)
.accessibilityLabel(Text("Attendees"))
.accessibilityValue(Text("(scrum.attendees.count)"))
Spacer()
Label("(scrum.lengthInMinutes)", systemImage: "clock")
.padding(.trailing, 20)
.accessibilityElement(children: .ignore)
.accessibilityLabel(Text("Meeting length"))
.accessibilityValue(Text("(scrum.lengthInMinutes) minutes"))
}
.font(.caption)
}
.padding()
.foregroundColor(scrum.color.accessibleFontColor)
}
}
struct CardView_Previews: PreviewProvider {
static var scrum = DailyScrum.data[0]
static var previews: some View {
CardView(scrum: scrum)
.background(scrum.color)
.previewLayout(.fixed(width: 400, height: 60))
}
}
This is the image I see from my code in Xcode’s preview:
And here is the one I see in Xcode’s preview from Apple’s already-complete sample code:
It seems reasonable that comparing the code I built to the code provided by Apple would highlight the problem, but zero differences come up. The two other views in the project work fine. Are there any other modules that would be significant besides this source, CardView.swift
?
4
Answers
Understand the issue
scrum.color.accessibleFontColor
applied to theforegroundColor
of the card. So all labels and images and texts and etc. will be affected.accessibleFontColor
seems to return eitherblack
orwhite
according to the parent color (scrum.color
in this case)seems
Color("Design")
that you are passing for the preview is returningclear
color because there is no color with the nameDesign
in assets in the starting project. So the preview shows the default white color as the card background. But it also uses thewhite
color for the foreground. So you see a solid white card in the result.Solutions
Comment out the
.foregroundColor(scrum.color.accessibleFontColor)
Or add an assets color and name it as expected.
Or give the card a manual background
Or download the completed version and reverse the process to the point that you are at.
This is caused by undefined "Design" color.
Copy the "Design" color from
Assets.xcassets
from Apple’s sample project, and put the color’s definition under theAssets.xcassets
directory of your project can solve your problem.I downloaded the project file from the tutorial, and I found there’s a file that you probably missed. You can check the Models folder in the sample code, there’s a file called
Color+Codable.swift
which is responsible for thisaccessibleFontColor
thingy.I ran into the same problem and found that I missed Step 5 in the "Creating a Card View -> Section 1: Create a Color Theme" part of the tutorial
I don’t think the instructions in this step very clear here for someone not familiar with Xcode. I solved this by importing the resources from a downloaded version of the sample project. Try these steps
Your Assets file should look like this when you’re finished. As a bonus you can use these same steps to import the app icon.