skip to Main Content

I’m learning Swift and SwiftUI following to this tutorial. The background color of the preview not changed as expected.

My code

The Theme.swift:

import SwiftUI

enum Theme: String {
    // ...others
    case yellow

    var accentColor: Color {
        switch self {
        case /* ...others */ .yellow: return .black // <-- Declare the yellow key for accent color
        case .indigo, .magenta, .navy, .oxblood, .purple: return .white
        }
    }
    var mainColor: Color {
        Color(rawValue)
    }
}

The DailyScrum.swift:

import Foundation

struct DailyScrum {
    var title: String
    var attendees: [String]
    var lengthInMinutes: Int
    var theme: Theme
}

extension DailyScrum {
    static let sampleData: [DailyScrum] =
    [
        DailyScrum(title: "Design",
                   attendees: ["Cathy", "Daisy", "Simon", "Jonathan"],
                   lengthInMinutes: 10,
                   theme: .yellow), // <-- assign yellow to the first item's theme which referred to the `Theme.swift`
        // others
    ]
}

The CardView.swift:

import SwiftUI


struct CardView: View {
    let scrum: DailyScrum
    var body: some View {
        Text("Hello, World!")
    }
}


struct CardView_Previews: PreviewProvider {
    static var scrum = DailyScrum.sampleData[0] // <-- get first item
    static var previews: some View {
        CardView(scrum: scrum)
            .background(scrum.theme.mainColor) // <-- get the mainColor of the first item
    }
}

And what I received in the preview:
preview of the CardView, the background yellow is supposed to appear, but it not.

Expected Preview

I’ve tried to change the scrum.theme.mainColor to .yellow or scrum.theme.accentColor, it works. I’m not sure what’s the problem here.

My Xcode version is 15, and Swift is 5.9.2.

2

Answers


  1. You can debug views like that:

    struct CardView: View {
        let scrum: DailyScrum
        var body: some View {
          Self._printChanges()
          return Text("Hello, World!")
              .background(scrum.theme.mainColor)
        }
    }
    

    What I got in console is:

    No color named ‘yellow’ found in asset catalog for main bundle
    (/Users/______/Library/Developer/Xcode/UserData/Previews/Simulator
    Devices/id/data/Containers/Bundle/Application/id/Test.app)

    Login or Signup to reply.
  2. It seems there are no issues with the code, so please try restarting Xcode, or reloading the Preview with ⌘+⌥+p.

    Also, the code below should yield the same results as ExpectedPreview. How about copying this and proceeding with the tutorial?

    import SwiftUI
    
    struct CardView: View {
        let scrum: DailyScrum
        var body: some View {
            Text("Hello, World!")
        }
    }
    
    
    struct CardView_Previews: PreviewProvider {
        static var scrum = DailyScrum.sampleData[0] // <-- get first item
        static var previews: some View {
            CardView(scrum: scrum)
                .background(scrum.theme.mainColor) // <-- get the mainColor of the first item
        }
    }
    
    import Foundation
    
    struct DailyScrum {
        var title: String
        var attendees: [String]
        var lengthInMinutes: Int
        var theme: Theme
    }
    
    extension DailyScrum {
        static let sampleData: [DailyScrum] =
        [
            DailyScrum(title: "Design",
                       attendees: ["Cathy", "Daisy", "Simon", "Jonathan"],
                       lengthInMinutes: 10,
                       theme: .yellow), // <-- assign yellow to the first item's theme which referred to the `Theme.swift`
            // others
        ]
    }
    
    import SwiftUI
    
    enum Theme: String {
        case indigo
        case magenta
        case navy
        case oxblood
        case purple
        case yellow
        
        var accentColor: Color {
            switch self {
            case /* ...others */ .yellow: return .black // <-- Declare the yellow key for accent color
            case .indigo, .magenta, .navy, .oxblood, .purple: return .white
            }
        }
        var mainColor: Color {
            Color(rawValue)
        }
    }
    
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search