如何在SwiftUI中预览设备的横向模式？

Question

我怎样在SwiftUI中预览设备的横向模式？

我只有一个简单的预览，类似这样：

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

- Felipe Peña

---

这是一个好问题！我尝试在iPhone SE预览中添加.environment(\.horizontalSizeClass,.compact)和.environment(\.verticalSizeClass, .compact)，但不会旋转。 - Matteo Pacini

你是在问关于Storyboard的吗？ - Asad Ali Choudhry

@AsadAliChoudhry 不是，这是SwiftUI。 - Fogmeister

Answer 1

Xcode 13

现在你可以使用 .previewInterfaceOrientation 修饰符将预览设置为横向模式，包括 landscapeLeft 或 landscapeRight。

_{⚠️ 以下来自 WWDC21 的图片使用了 Xcode 13 beta 中不可用的horizontal 和 vertical。}

---

旧方法但并非无用:

您可以为 PreviewProvider 设置任何横向尺寸大小。

struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
           .previewLayout(.fixed(width: 1024, height: 768))
           // iPad Mini landscape size
    }
}

这是横屏模式的尺寸。

更新: Xcode会检测IDE左上角选择的模拟器关联的设备，并为一些iPad和iPhone的横屏模式应用你所期望的安全区域。

主从演示

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Master")
            Text("Detail")
        }
    }
}

另外，您可以根据自己的需求使用这两个修饰符：

    .environment(\.horizontalSizeClass, .regular)
    .environment(\.verticalSizeClass, .compact)

- Mojtaba Hosseini

---

谢谢。在苹果发布横屏模式之前给出最佳答案。 - Felipe Peña

希望苹果能尽快发布横屏模式。 - rener172846

我不同意；今天最好的答案是无法完成。 固定大小不会尊重安全区域（如上所述），但也不会调整辅助浏览器界面，例如状态、导航和标签栏。最后，在iPad上，它无法正确显示主/详细视图。 - Steve Madsen

现在它支持安全区域和显示主/细节，正如您可以在@SteveMadsen和其他+20的演示中看到的那样。 - Mojtaba Hosseini

这个技巧不适用于_实时_预览。 - David James

@MojtabaHosseini RC版本现在可用.previewInterfaceOrientation。 - George

Answer 2

ContentView().previewLayout(PreviewLayout.fixed(width:568,height:320))

查看 - 不同设备的IOS屏幕尺寸

- C Williams

Answer 3

iOS 15+ / Xcode 13+

从iOS 15开始，我们可以使用previewInterfaceOrientation：

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

- pawello2222