I'm trying to achieve the below effect on my LazyVGrid. Here's my current implementation. I would also like the Grid to span the available area. I tried setting .frame
using GeometryReader
but couldn't get to work.
struct BSSoundComposerGridView: View {
@Binding var sounds: [BSComposerSound]
var callback: ((_ sound: BSComposerSound) -> Void)?
var body: some View {
let columns = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]
LazyVGrid(columns: columns, spacing: 0) {
ForEach(BSComposerSound.allCases, id: \.self) { sound in
Button {
callback?(sound)
} label: {
ZStack(alignment: .center) {
Divider()
.frame(width: 1)
.frame(maxHeight: .infinity)
.background(.gray)
VStack(spacing: -8) {
Image(isSelected(sound: sound) ? sound.selectedImageResource : sound.imageResource)
.imageScale(.large)
Text(sound.description)
.font(.caption)
}
}
}
}
}
}
func isSelected(sound: BSComposerSound) -> Bool {
return sounds.contains(sound)
}
}