Question 67268 in IOS Swift Question posted in
The official documentation can be found here.

How to set CardView background color with .background()? – Ios swift

I’m following the SwiftUI tutorial at https://developer.apple.com/tutorials/app-dev-training/displaying-data-in-a-list

Running the project’s sample download files, I can see the CardView includes the correct background color with this code:

        CardView(scrum: scrum)
            .background(scrum.theme.mainColor)

It looks like this (it works):
sample code with working preview

For whatever reason, I have copied ALL of the code exactly as-is from Apple’s sample file into my local Project, and I do not get a background color.

My local Xcode project looks like this (no background color even though exact same code):

same code but preview does not work

I understand the simple code conceptually. There is a DailyScrum model object that has an attribute Theme. The Theme enum has a mainColor. This mainColor is passed to the CardView .background().

So I don’t understand if this is an Xcode issue, a config file issue, a simulator issue, or a Scheme (to run iPhone Simulator) issue. I have no idea why running the exact same SwiftUI code in two different Xcode projects results in 1 with a working preview and another without a working preview. What am I missing here?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    In the downloadable sample project from Apple, there is an Assets folder with named colors in Themes. This needs to be created so the named colors can be found.

    named colors in Themes


  2. 0

    Do you read the tutorials carefully? Apple says that all of that colors are in the starter project.

    enter image description here

    Login or Signup to reply.
  3. 0

    A little more input to your problem…
    The use of the .background() modifier needs a content inside your Assets folder or an View and the declaration shows us it will return a view, important to know.

    Lets take a look in the Declaration.

    func background<Background>(
    _ background: Background,
    alignment: Alignment = .center
) -> some View where Background : View

    What is possible to do with the .background modifier?

    You can now use an image like you did. This could be a single colour, but also an image of a city, bagles or whatever. The cooler thing the .background modifier offers us are the views you can insert and play around with.

    Lets say you want a Rectangle behind an Folder-systemimage.

    You would now create a struct, build your background in it and pass this struct inside your Image, as an background. I’ll show you an example from apple.

    //here you can find your struct what currently shows the Rectangle background
struct DiamondBackground: View {
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.gray)
                .frame(width: 250, height: 250, alignment: .center)
                .rotationEffect(.degrees(45.0))
        }
    }
}


struct Frontmost: View {
    var body: some View {
        VStack {
            //here is your image - in this case its a simple systemimage (can found in SFSymbols)
            Image(systemName: "folder")
                .font(.system(size: 128, weight: .ultraLight))
                .background(DiamondBackground())
                //here is the .background modifier with your selfmade DiamondBackground struct 
        }
    }
}

    This example looks like this now:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search