iosswiftxcodeswiftuipreview

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

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?

Solution

  • 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