The Hidden Gotcha of Default VStack Spacing

Andrew
Mar 14, 2022

--

Last week, my colleague and I were working on a new feature. We decided to deliver most of it in UIKit, but with a little SwiftUI splashed-in.

Photo by Kelly Sikkema on Unsplash

The design wanted a few elements arranged vertically to be flush next to one another, no gaps, nothing.

Using a VStack to arrange our elements resulted in gaps as depicted by the horizontal black lines. Odd. We’d not set any padding on any of the elements, so what gives!

A stack of three rectangles (green, red, blue from top to bottom)

Turns out, VStack applies a little spacing by default, which you can disabled by adding spacing: 0 to the initializer for your VStack (see line 3):

That’ll close the gaps and give you this:

🤘🏼🤘🏼🤘🏼

--

--

Andrew
Andrew

Written by Andrew

iOS Software Engineer. Punster extraordinaire. Part-time nerf herder.

No responses yet