Layout multiple SwiftUI previews horizontally (or in grid) instead of vertically?

user_105741 0
Viewed 974

When rendering multiple SwiftUI previous, they always render in a vertical stack. I would like to lay them out horizontally or ideally on a grid., because I have more horizontal space on my screen.

It's unproductive to have to keep scrolling up-and-down between multiple the previews, especially when you have more than two.

Anyone know a work around, or if it's possible?

Update: E.g. As you see in the screen shot, I want to those two previews side by side horizontally.

Xcode Version 12.0 beta (12A6159)

enter image description here

swiftui swift xcode
2 Answers

You can achieve it like this. This way it doesn't show iPhone borders but views render it as how it will look on iPhone 11 Pro screen.

struct SidebarView_Previews: PreviewProvider {
    static var previews: some View {
        HStack {
            //... All your views ...
        }.previewLayout(.fixed(width: 375 * 2, height: 812))
    }
}
user_117337360

Just replace the preview Group by an HStack, this way:

struct SidebarView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            //... All your views ...
        }
        
    }
}

to:

struct SidebarView_Previews: PreviewProvider {
    static var previews: some View {
        HStack(spacing: 20) {
            //... All your views ...
        }
        
    }
}
user_92217050
Related