Как сделать так, чтобы квадрат 2x2 поместился на экран в SwiftUI

Я пытаюсь создать сетку 2x2 через VStacks / HStacks или LazyVGrid, чтобы квадраты в каждой строке соответствовали экрану. Например, первый и второй квадраты занимают половину ширины экрана, и на основе этой длины будет определяться высота, чтобы сделать его квадратом. Как бы я сделал это двумя упомянутыми мною способами или есть лучший способ сделать это? Вот что у меня есть на данный момент.

      VStack {
    HStack {
        Rectangle()
            .fill(Color.gray)
            .frame(width: 100, height: 100)

        Rectangle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
    }
    HStack {
        Rectangle()
            .fill(Color.red)
            .frame(width: 100, height: 100)

        Rectangle()
            .fill(Color.green)
            .frame(width: 100, height: 100)
    }
}

Кажется неправильным жестко задавать здесь ширину и высоту для свойства frame или это способ удалить зазоры между квадратами? Будет ли этот способ жесткого кодирования масштабироваться для других размеров телефона?

      LazyVGrid(columns: layout) {
    Rectangle()
        .fill(Color.gray)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.blue)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.red)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.green)
        .frame(width: 210, height: 210)
}

3 ответа

Кажется неправильным жестко указывать ширину и высоту для рамки, или это способ удалить зазоры между квадратами?

Чтобы удалить промежутки между квадратами, просто измените HStack / VStack, включив интервал:

      HStack(alignment: .center, spacing: 0, content: {
            Rectangle()
                .fill(Color.gray)
                .frame(width: 100, height: 100)

            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
})

Ты можешь использовать GeometryReader, как показано здесь .

Пример использования:

      struct MyView: View {
    var body: some View {
       GeometryReader { geo in
           //You now have access to geo.size.width and geo.size.height
       }
    }
}

Просто примените (значение 1 и размер экрана), то рамку указывать не нужно.

      VStack {
    HStack {
        Rectangle()
            .fill(Color.gray)
            
        Rectangle()
            .fill(Color.blue)
            
    }
    HStack {
        Rectangle()
            .fill(Color.red)
        
        Rectangle()
            .fill(Color.green)
            
    }
}
.aspectRatio(1.0, contentMode: .fit)
Другие вопросы по тегам