Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show line / separator view in SwiftUI

Tags:

swift

swiftui

I want to show a separator line in my SwiftUI app. To achieve that, I tried to create an empty view with a fixed frame and a background color / border:

EmptyView()     .frame(width: 200, height: 2)     .background(Color.black) // or:     .border(Color.black, width: 2) 

Unfortunately, I cannot see any dark view showing up.
Is there a way to show a separator / line view?

like image 380
LinusGeffarth Avatar asked Jun 16 '19 12:06

LinusGeffarth


People also ask

How do I create a separator in SwiftUI?

If the canvas isn't visible, select Editor > Editor and Canvas to show it. The Horizontal Divider is displayed as a horizontal line to divide views. Inside a HStack the divider is displayed as a vertical line. The size of the divider can be changed with the frame modifier.

How do I create a vertical divider in SwiftUI?

For a vertical divider, you set the width to the thickness you want. Text("A visual element that can be used to separate other content.") Set a vertical divider thickness by setting the width.

How do I remove a separator line in SwiftUI?

Unfortunately, there is no official way to remove line separators in SwiftUI. That said, we can make use of the UIKit API to tweak the line separator of the List view in SwiftUI.


1 Answers

Use Divider:

A visual element that can be used to separate other content.

Example:

struct ContentView : View {     var body: some View {         VStack {             Text("Hello World")             Divider()             Text("Hello Another World")         }     } } 

Output: enter image description here

like image 153
J. Doe Avatar answered Sep 21 '22 21:09

J. Doe