Xcode14 canvas panel problem

Hello! I'm studying swift in college now, and have encountered a problem previewing my code using canvas. Here's part of the code:

struct ContentView: View {
        ......(omitted)
var body: some View{
        ScrollView{
            cards
            Spacer()
            cardsAdjuster
       }
   }

The canvas panel looks all right with the line "ScrollView", as the image shows, with the only problem that "cardsAdjuster" moves with the cards.

But if I remove the line "ScrollView", the panel went wrong:

As the image displays, all parts of body are displayed separately, and I can't find any setting options to merge them. (Take a look at the top of the screenshot)

The problem is also found on my classmate's Xcode 12 running on macOS Monterey.

Looking forward to your reply and thoughts. Thank you all!!

Anything you place inside the ScrollView's braces will be included in the scrolling content. If you move cardAdjuster. If you move cardAdjuster below the closing brace of the ScrollView, it should no longer be part of the scrollable content.

Update: The issue is probably caused by the preview code in Xcode.

I've airdropped my ContentView to my classmate's MacBook Air running macOS Sonoma and Xcode 15. The same issue occurred. But after replacing the preview code:

struct ContentView_Previews: PreviewProvider { 
        static var previews: some View {
            ContentView()
        }
    }

with the preview code used in Xcode 15:

#Preview {
    ContentView()
        .modelContainer(for: Item.self, inMemory: true)
}

The issue disappeared. Everything works well.

The problem is that the latter code isn't available for Xcode 14 or earlier version. I wonder if there're any workarounds for this?

Thank you all for viewing or replying!! =)

Xcode14 canvas panel problem
 
 
Q