Add a bottom divider to your SwiftUI view!

So... I had a search bar, just beneath the navigation bar, and beneath it, a list. To avoid having the list's items disapear seemingly in the middle of nowhere, I wanted to add a divider between my search bar and my list.

Pretty standard, right? In Swift, I simply used to creat a full-width, 1 one pixel high view of my chosen color, and position it between whatever views or elements I wanted to separate.

But how does one get it done in SwiftUI?

After fumbling a bit, I looked around. And I found this:

Add bottom line to view in SwiftUI / Swift / Objective-C / Xamarin

I would like to keep the border at the bottom part only in UITextField.But I don’t know how we can keep it on the bottom side. Can you please advise me?

Stack Overflowdhaval shah

It works. But my divider now had some padding beneath it. So my list's content still disapeared into and appeared from nothing when scrolling, which just wasn't good enough.

So I kept looking around. And that's when I stumbled onto it:

SwiftUI's Divider

Yes. You read right. We now have an actual thing that explicitely exists for the sole purpose of separating visual elements.

Put it in a VStack, and there you go!

You're welcome!