Scrumdinger CardView .previewLayout does not work

Question

hrmd OP

Created Oct ’22

Replies 3

Boosts 0

Views 1.2k

Participants 3

Hi all,

my code looks like:

import SwiftUI



struct CardView: View {

    let scrum: DailyScrum

    var body: some View {

        Text(scrum.title)

            .font(.headline)

    }

}



struct CardView_Previews: PreviewProvider {

    static var scrum = DailyScrum.sampleData[0]

    static var previews: some View {

        CardView(scrum: scrum)

            .background(scrum.theme.mainColor)

            .previewLayout(.fixed(width: 400, height: 60))

    }

}

In web tutorial .previewLayout(.fixed(width: 400, height: 60)) is changing size of the preview. But not for me, I still have full size preview and with adding Spacer() like this:

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")
            }
        }
    }
}

the body will grow across whole phone preview. Where am I wrong please ?

Boost

Answer 1

Claude31 OP

Oct ’22

There is a problem in Xcode 14.

Capture d’écran 2022-10-06 à 23.48.42.png

I tested on Xcode 14.1ß. Takes eons to initialize preview (Indexing | Initializing Datastore). At the end, same problem as with Xcode 14.

It works in Xcode 13.2.1 or 13.4.1

Capture d’écran 2022-10-06 à 23.43.57.png

The preview shows the card alone, not in the List as it will be in

struct ScrumsView: View {

To get it with the desired height with Xcode 14, specify CardView frame:

struct CardView: View {
    let scrum: DailyScrum
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(scrum.title)
                .accessibilityAddTraits(.isHeader)
                .font(.headline)
            Spacer()
            HStack {
                Label("\(scrum.attendees.count)", systemImage: "person.3")
                    .accessibilityLabel("\(scrum.attendees.count) attendees")
                Spacer()
                Label("\(scrum.lengthInMinutes)", systemImage: "clock")
                    .accessibilityLabel("\(scrum.lengthInMinutes) minute meeting")
                    .labelStyle(.trailingIcon)
            }
            .font(.caption)
        }
        .frame(height: 60) // <<-- ADD THIS
        .padding()
        .foregroundColor(scrum.theme.accentColor)
    }
}

You should file a bug report.

0

Answer 2

Claude31 OP

Oct ’22

I missed something.

There is a button "Preview on Device" that toggles between the 2 presentations !

Capture d’écran 2022-10-06 à 23.43.57.png

But it is inactive in my version of Xcode 14…

I found a way: click on "Selectable" button to get the right view. Not very explicit name…

Toggle preview.png

No bug to report, except documentation ?

1

Answer 3

Jaymz_Pahts OP

Apr ’23

So grateful to find this thread. This helped me to make progress.

At the same time, I'm amazed at the poor documentation in this tutorial.

At least I'm moving forward, and it's thanks to this discussion. It's lovely to think of how many people have been helped by your last response, @Claude31.

0