预览SwiftUI视图的教程

137 阅读2分钟

从Xcode 13开始,SwiftUI视图现在可以使用新的previewInterfaceOrientation 修改器在横向方向上进行预览。例如,在这里我们通过在PreviewProvider 中创建两个视图的实例来预览一个MenuView 的纵向和横向:

struct MenuView_Previews: PreviewProvider {
    static var previews: some View {
        MenuView()
        MenuView().previewInterfaceOrientation(.landscapeRight)
    }
}

请注意,当我们想用纵向以外的方向预览一个给定的视图时,我们只需要应用上述修改器,因为该方向是默认使用的。

然而,虽然上述代码在一个以iOS 15为最低部署目标的项目上工作时完全正常,但如果我们的应用程序也支持早期的系统版本,我们最终会得到一个编译器错误,因为(尽管这是预览特定的代码)我们使用的是iOS 15中引入的API。

为了解决这个问题,我们可以使用一个内联的可用性检查

struct MenuView_Previews: PreviewProvider {
    static var previews: some View {
        MenuView()

        if #available(iOS 15, *) {
            MenuView().previewInterfaceOrientation(.landscapeRight)
        }
    }
}

或者,我们可以使我们的整个预览提供者需要iOS 15:

@available(iOS 15.0, *)
struct MenuView_Previews: PreviewProvider {
    static var previews: some View {
        MenuView()
        MenuView().previewInterfaceOrientation(.landscapeRight)
    }
}

上述两种解决方案都可以,但如果每次我们想在横向预览我们的视图时都要插入这些可用性声明,可以说是相当不方便的。

解决这个问题的一个方法是将新的previewInterfaceOrientation 修改器包裹在一个自定义方法中,执行所需的可用性检查,如果在较旧的操作系统版本上预览,则退回到简单地呈现我们的视图(在撰写本文时,在使用Xcode 13时似乎甚至不可能做到):

extension View {
    @ViewBuilder
    func previewInLandscape() -> some View {
        if #available(iOS 15, *) {
            previewInterfaceOrientation(.landscapeRight)
        } else {
            self
        }
    }
}

有了上面的内容,我们现在可以简单地使用我们新的、自定义的修改器方法,只要我们想在景观中预览我们的一个视图,而不需要在每个调用站点添加任何可用性检查:

struct MenuView_Previews: PreviewProvider {
    static var previews: some View {
        MenuView()
        MenuView().previewInLandscape()
    }
}

能够在横向预览SwiftUI视图是对Xcode预览系统的一个很好的补充,使用上述扩展,我们将能够使用这个新功能,而不需要使我们的预览代码更加复杂。

希望你会发现这个提示是有用的,并感谢阅读!