Я реализую LazyVGrid
, но хотел бы, чтобы все ячейки оптимально имели одинаковые вертикальные и горизонтальные размеры. В настоящее время мое представление выглядит так:
При добавлении теней очень важно, чтобы фоны ячеек были изменены, чтобы все совпадало. Пока мой код:
struct IconButton: View {
let icon: Icon
var body: some View{
Button {
} label:{
VStack{
Image(icon.imageName)
.resizable()
.scaledToFit()
Text(icon.title)
.font(.title3)
.bold()
.foregroundColor(.black)
.multilineTextAlignment(.center)
}
}
}
}
ScrollView{
LazyVGrid(columns: Array(repeating: .init(), count: 3)){
ForEach(icons, id: \.self){icon in
IconButton(icon: icon)
}
.padding(12)
.background(Color.white)
.cornerRadius(8)
.shadow(radius: 4)
}
.padding()
}
До сих пор я пытался изменить параметры GridColumns
, а также установить кадр из IconButton
либо непосредственно с помощью .frame()
, либо с чем-то вроде .aspectRatio()
. Однако все они связаны с самой кнопкой, а не с размером всех других кнопок. Этот ответ SO имеет подход к отслеживанию самых больших размеры для любого вида, а затем последовательно задает все остальные виды с той же рамкой. Однако, хотя он, кажется, работает из ответа, этот подход кажется чрезмерно сложным, учитывая, что он имеет дело с подпредставлениями в представлении списка, а не с прямыми дочерними элементами представления сетки. Есть ли более интуитивный подход к GridView
?
Основная проблема, которую я могу вообразить при попытке реализовать что-то подобное, заключается в том, что, поскольку это сетка lazy
, ячейки внизу не размещаются до тех пор, пока это необходимо, и, таким образом, по мере их создания могут потребоваться размеры других ячейки изменяться, если найдена ячейка большего размера. Я не предполагаю, что это будет особенно проблематично с моей реализацией, так как у меня всего около 15 ячеек. Означает ли это, что мне следует возиться с LazyGrid
?