Search code examples
swiftxcodeswiftui

Why is Xcode Preview only showing portion of View with background?

I am following the Apple tutorial to learn how to make iOS apps. This is the link: https://developer.apple.com/tutorials/develop-in-swift/design-an-interface

In the app OnboardingFlow, I am trying to set the background of FeaturesPage in the preview to a gradient with colors that I have defined in my Assets folder. The background shows up behind the text but not behind the FeatureCards I've defined.

This is my FeatureCard:

//
//  FeatureCard.swift
//  OnboardingFlow
//
//

import SwiftUI

struct FeatureCard: View {
    let iconName: String
    let description: String
    
    var body: some View {
        HStack {
            Image(systemName: iconName)
                .font(.largeTitle)
                .foregroundColor(.white)
                .frame(width: 50)
                .padding(.trailing, 15)
            
            Text(description)
                .foregroundColor(.white)
            
            Spacer()
                
        }
        .padding()
        .background(.tint, in: RoundedRectangle(cornerRadius: 12.0))
        .frame(width: 350)
    }
}

#Preview {
    FeatureCard(iconName: "person.2.crop.square.stack.fill", description: "A multiline description about a feature with the image on the left.")
}

This is my FeaturesPage:

//
//  FeaturesPage.swift
//  OnboardingFlow
//
//

import SwiftUI

struct FeaturesPage: View {
    var body: some View {
        Text("Features")
            .font(.title)
            .fontWeight(.semibold)
        FeatureCard(iconName: "person.2.crop.square.stack.fill", description: "A multiline description about a feature paired with the image on the left.")
        FeatureCard(iconName: "quote.bubble.fill", description: "A short summary.")
    }
}

#Preview {
    FeaturesPage()
        .background(Gradient(colors: [.white, .gray]))
}

Why is the background I apply in the preview not showing up across my whole FeaturesPage View? You can see what I'm talking about in my Preview link: My Preview

This is a link to a picture from the tutorial showing how it's supposed to look: Tutorial Preview

Solution

  • You are doing all great, just forgot to wrap all of your FeaturesPage body content in any Stack view, that's why It's giving gradient on first UI element in the body structure.

    Just replace your FeaturesPage body with the following:

    struct FeaturesPage: View {
var body: some View {
    VStack{
        Text("Features")
            .font(.title)
            .fontWeight(.semibold)
        FeatureCard(iconName: "person.2.crop.square.stack.fill", description: "A multiline description about a feature paired with the image on the left.")
        FeatureCard(iconName: "quote.bubble.fill", description: "A short summary.")
    }
    .padding()
  }
}

    And than you will see the desired result. Like: enter image description here