The Hidden Gotcha of Default VStack Spacing

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:

🤘🏼🤘🏼🤘🏼

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create Flexible Components in Swift

Detect iOS Shake Gestures: Swift

Create a Circular Profile Image: Swift UIKit

Zero-Sum and Odd-Even Subarrays in Swift

Swift UI Part 1 (Introduction)

Flutter plugin story (art 3): creating a platform view to display an image with a filter

Unity AR Foundation and CoreML: Hand detection and tracking

Control Transfer Statements in Swift

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrew

Andrew

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

More from Medium

SwiftUI LazyVStack vs VStack

Go here for the latest Swift release info:

Algebraic types in the Swift type system

SwiftUI & Combine learnings