Сделать сетку 2х2 на основе ширины экрана

Question

Извините, если это простой вопрос, но я только начинаю с SwiftUI и пытаюсь выяснить, как сделать сетку видов 2x2 на основе ширины экрана. Это означает, что каждый квадрат имеет ширину и высоту, имеет ширину экрана, и они расположены в сетке 2x2 без отступов.

Я пробовал использовать два HStacks с двумя представлениями в каждом, расположенном сверху каждогодругой, но размер представления внутри HStack, похоже, определяет высоту HStack.

Код для представлений Я пытаюсь расположить в сетке 2x2:

var body: some View {
        VStack {
            TextField("0", text: $value)
                .multilineTextAlignment(.center)
                .textFieldStyle(PlainTextFieldStyle())
                .font(.system(size: 40, weight: .semibold, design: .rounded))
                .border(Color.black)
                .padding()

            Text(title)
                .padding([.leading, .bottom, .trailing])
                .font(.system(size: 14, weight: .regular, design: .rounded))
            }
                .background(Color.green)
                .cornerRadius(10)
                .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.black, lineWidth: 5))
    }

Answer 1

Я считаю, что использование комбинации HStack s, VStack s и aspectRatio(_ aspectRatio: CGFloat? = nil, contentMode: ContentMode) лучше всего работает для наложения определенных пропорций на представления:

struct ContentView: View {

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Rectangle().fill(Color.red)
                    .aspectRatio(1.0, contentMode: .fit)
                Rectangle().fill(Color.green)
                    .aspectRatio(1.0, contentMode: .fill)
            }
            HStack(spacing: 0) {
                Rectangle().fill(Color.blue)
                    .aspectRatio(1.0, contentMode: .fit)
                Rectangle().fill(Color.yellow)
                    .aspectRatio(1.0, contentMode: .fill)
            }
        }.aspectRatio(contentMode: .fit)
    }
}

В результате получается макет, подобный следующему:

Answer 2

Это можно сделать, используя GeometryReader:

struct ContentView: View
{
    var body: some View
    {
        GeometryReader
        { geometry in
            self.useProxy(geometry)
        }
    }

    func useProxy(_ geometry: GeometryProxy) -> some View
    {
        let dimension = min(geometry.size.width, geometry.size.height)
        return VStack
        {
            HStack(spacing: 0)
            {
                Text("Top Left")
                    .frame(width: dimension / 2, height: dimension / 2)
                    .border(Color.black)

               Text("Top Right")
                   .frame(width: dimension / 2, height: dimension / 2)
                   .border(Color.black)
            }

            HStack(spacing: 0)
            {
                Text("Bottom Left")
                    .frame(width: dimension / 2, height: dimension / 2)
                    .border(Color.black)

               Text("Bottom Right")
                   .frame(width: dimension / 2, height: dimension / 2)
                   .border(Color.black)
            }
        }
    }
}

Смотреть (первая часть) это видео WWDC , чтобы узнать о системе разметки SwiftUI.