Swift UI - Как сделать изображения сетки?

Question

Необходимо создать сетку изображений с SwiftUI, которая динамически изменяет строки в соответствии с шириной экрана.

Когда я использую List, я могу получить только один столбец ..

Iпопытался с помощью Hstacks создать 2 столбца, но затем он не работает динамически для ширины экрана.

Пример: в портрете iPhone должно быть 1 столбец Пример: в альбоме iPhone должен быть 2 столбца

import SwiftUI

struct ProductGrid : View {
    var body: some View {

        List(0 ..< 5) { item in

            VStack() {
                Image("product")
                HStack {

                   ProfileImageSmall()
                        VStack {
                            Text("Product")

                            Text("Username")


                        }


                    }



            }

        }
    }
}

Как я могу сделать сетку, чтобы количество столбцов соответствовало ширине экрана?

Answer 1

Вы можете использовать классы размера, чтобы определить правильную ориентацию интерфейса.

Чтобы проверить, является ли iPhone альбомным или нет, вы можете проверитьзначение среды класса вертикального размера.

Когда для устройства установлено значение portrait, для него установлено значение .regular, в противном случае возвращается .compact.

. Можно использовать оболочку свойства @Environment дляподпишитесь на это значение среды и сделайте перерисовку вида самой при изменении.

В этом примере у меня отображается большой зеленый квадрат, когда iPhone находится в режиме portrait, и два меньших квадрата (одинзеленый, один розовый), когда iPhone находится в режиме landscape.

struct ContentView: View {

    @Environment(\.verticalSizeClass) var verticalSizeClass: UserInterfaceSizeClass?

    var body: some View {
        GeometryReader { geometry in
            ScrollView {
                ForEach(1...24) { item in
                    if self.verticalSizeClass == .regular {
                        HStack {
                            Spacer(minLength: geometry.size.width * 0.15)
                            Rectangle()
                                .foregroundColor(.green)
                                .frame(width: geometry.size.width * 0.70,
                                       height: geometry.size.height * 0.3)
                            Spacer(minLength: geometry.size.width * 0.15)
                        }
                    } else {
                        HStack {
                            Spacer(minLength: geometry.size.width * 0.05)
                            Rectangle()
                                .foregroundColor(.green)
                                .frame(width: geometry.size.width * 0.40,
                                       height: geometry.size.height)
                            Spacer(minLength: geometry.size.width * 0.05)
                            Rectangle()
                                .foregroundColor(.pink)
                                .frame(width: geometry.size.width * 0.40,
                                       height: geometry.size.height)
                            Spacer(minLength: geometry.size.width * 0.05)
                        }
                    }
                }
            }
        }
    }

}

Портретная раскладка :

Пейзажная планировка :