0

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)
    }
}

zig-zag grid

Ace Green
  • 381
  • 5
  • 29

0 Answers0