Макет для конкретного устройства с SwiftUI на Apple Watch и iPhone

Question

Иногда мне нужно внести изменения в макеты для конкретного устройства. Например, мне может понадобиться уменьшить интервал на iPhone с меньшим экраном или увеличить интервал на самых больших экранах. С UIKit (и даже Интерфейсным Разработчиком) было легко сделать исключения макета для определенных классов размера. Каков наилучший способ создания условных макетов для конкретного устройства с помощью SwiftUI?

Я изучал документацию SwiftUI и не нашел способа получить доступ и использовать этот тип информации в макетах.

Ниже приведен пример приложения Apple Watch. В соответствии с рекомендациями Apple по проектированию я добавляю 8,5 точек отступа влево и вправо на 40-мм серии 4. Однако 44 мм должны иметь 9,5 точки заполнения, и любые часы Apple Watch старше 4-й серии не должны иметь отступов.

Каков наилучший способ добиться этого с SwiftUI?

struct ContentView : View {

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

Answer 1

В общем, есть два метода, которые вы можете использовать для достижения конкретных макетов устройства:

1. Размер классов с помощью @Environment переменных
2. GeometryReader для более детального контроля

К сожалению, UserInterfaceSizeClass имеет только .compact и .regular и недоступен в watchOS.

Для использования среды:

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

Чтобы использовать GeometryReader:

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

Для справки, вот разрешения часов:

• 40 мм: 394 × 324
• 44 мм: 448 × 368
• 38 мм: 340 × 272
• 42 мм: 390 × 312