Как сделать так, чтобы квадрат 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
}
}
}
Просто примените
VStack {
HStack {
Rectangle()
.fill(Color.gray)
Rectangle()
.fill(Color.blue)
}
HStack {
Rectangle()
.fill(Color.red)
Rectangle()
.fill(Color.green)
}
}
.aspectRatio(1.0, contentMode: .fit)