Consistent spacing on a grid of ContainerRelativeShapes?

Question

Hello, I'm trying to make a grid of container-relative shapes, where outside gutters match the gutters in between the items.

This stickiest part of this problem is the fact that calling .inset on a ContainerRelativeShape doubles the gutter in between the items.

I've tried LazyVGrid, and an HStack of VStacks, and they all have this double gutter in between.

I think I could move forward with some gnarly frame math, but I was curious if I'm missing some SwiftUI layout feature that could make this easier and more maintainable.

Screen Shot 2022-04-15 at 2.51.49 PM.png

SwiftUI

764

Posted by

J0hn

Reply

Add a Comment

Answer 1

Discovered using a negative spacing in the VStack+HStack technique that matches the relative shape inset works well enough:

                HStack(spacing: -3) {
                    VStack(spacing: -3) {
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                    }

                    VStack(spacing: -3) {
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                    }
                }

Posted by

J0hn

This is useful if you're wanting to use the relative shape as a clipping shape (meaning it needs to retain its shape-ness)

Otherwise you can use a spacing of 0 and using .padding(3) instead if .inset(by:3) in this example

—
J0hn

Add a Comment

Answer 2

Discovered using a negative spacing in the VStack+HStack technique that matches the relative shape inset works well enough:

                HStack(spacing: -3) {
                    VStack(spacing: -3) {
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                    }

                    VStack(spacing: -3) {
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                        ContainerRelativeShape()
                            .inset(by: 3)
                            .fill(.yellow)
                    }
                }

Posted by

J0hn

This is useful if you're wanting to use the relative shape as a clipping shape (meaning it needs to retain its shape-ness)

Otherwise you can use a spacing of 0 and using .padding(3) instead if .inset(by:3) in this example

—
J0hn

Add a Comment

Consistent spacing on a grid of ContainerRelativeShapes?

Accepted Reply

Replies