Apple's SwiftUI tutorial code doesn't display view contents in homemade copy

Question

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?

score 9 · Answer 1 · answered Jan 16 '22 at 16:02

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

Open the Assets file in Xcode
Right click and select Import
Navigate to the downloaded project and select the "Themes" directory, which is a subdirectory of Assets.xcassets

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.

Mojtaba Hosseini · Accepted Answer · 2021-07-16T21:57:16.377

Understand the issue

scrum.color.accessibleFontColor applied to the foregroundColor of the card. So all labels and images and texts and etc. will be affected.
accessibleFontColor seems to return either black or white according to the parent color (scrum.color in this case)
seems Color("Design") that you are passing for the preview is returning clear color because there is no color with the name Design in assets in the starting project. So the preview shows the default white color as the card background. But it also uses the white 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.

score 3 · Answer 3 · edited Aug 29 '21 at 06:48

3

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 this accessibleFontColor thingy.

edited Aug 29 '21 at 06:48

Dharman

30,962
25
85
135

answered Aug 29 '21 at 06:42

zym

31
2

score 2 · Answer 4 · answered Aug 22 '21 at 17:30

2

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 the Assets.xcassets directory of your project can solve your problem.

answered Aug 22 '21 at 17:30

razrLeLe

107
2
10

interesting that when I copied the "Design" in, and retain the ".foregroundColor(scrum.color.accessibleFontColor)", the Build failed and then I deleted the "Design" and uncomment the .foregroundColor(scrum.color.accessibleFontColor), then the colour shows. – olucube.com Oct 29 '21 at 11:55

Apple's SwiftUI tutorial code doesn't display view contents in homemade copy

4 Answers4

Understand the issue

Solutions

Linked