在Apple Watch和iPhone上使用SwiftUI进行设备特定的布局

Question

有时，我需要对设备进行特定于布局的调整。例如，我可能需要减小屏幕较小的iPhone上的间距，或者增大屏幕较大的iPhone上的间距。使用UIKit（甚至是Interface Builder），可以很容易地为特定尺寸的类设置布局例外。使用SwiftUI进行条件特定于设备的布局的最佳方法是什么？

我一直在搜索SwiftUI文档，但是还没有找到在布局中访问和使用此类信息的方法。

以下是Apple Watch应用的示例。根据Apple的设计准则，我在40mm Series 4的左侧和右侧添加了8.5点填充。但是，44mm的填充应为9.5点，任何比Series 4早的Apple Watch都应没有填充。

SwiftUI实现此目标的最佳方法是什么？

struct ContentView : View {

    var body: some View {
        HStack {
            Text("Hello World")
        }.padding([.horizontal], 8.5)
    }
}

Answer 1

通常，可以使用两种方法来实现设备特定的布局：

1. 通过@Environment变量确定类别
2. GeometryReader 进行更细粒度的控制

不幸的是，UserInterfaceSizeClass仅具有.compactand .regular不能在watchOS上使用。

要使用环境：

struct MyView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
}

要使用GeometryReader：

var body -> some View {
    GeometryReader { proxy in
      if proxy.size.width > 324.0/2.0 { // 40mm watch resolution in points
        MyBigView()
      } else {
        MySmallView()
      }
    }
}

供参考，以下是手表分辨率：

• 40毫米：394×324
• 44毫米：448×368
• 38毫米：340×272
• 42毫米：390×312

除以2.0得到的值points代替pixels。