skip to Main Content

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:
enter image description here

And here is the one I see in Xcode’s preview from Apple’s already-complete sample code:
enter image description here

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


  1. Understand the issue

    1. scrum.color.accessibleFontColor applied to the foregroundColor of the card. So all labels and images and texts and etc. will be affected.

    2. accessibleFontColor seems to return either black or white according to the parent color (scrum.color in this case)

    3. 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.

    Login or Signup to reply.
  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.

    Login or Signup to reply.
  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.

    Login or Signup to reply.
  4. 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.

    Xcode screenshot

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search