How it works
A Divider is a lightweight visual separator that draws a thin line between adjacent elements, helping you group related content and signal where one section ends and another begins. Reach for it when a layout needs structure but a heavier container like a box or a card would be too much. In a stack it sizes and orients itself automatically, so you place it where you want a break rather than configuring a shape by hand.
Create the separator with Divider()
Divideris aViewyou instantiate with its no-argument initializer,Divider(). It carries no content of its own; it simply renders a hairline rule wherever you drop it into a view hierarchy, as it does twice between theTextrows here.Let the enclosing stack set its orientation
Dividerreads the axis of the layout it lives in: inside a vertical container it draws a horizontal line spanning the available width, and inside a horizontal one it draws a vertical line. Because it sits in aVStack, eachDivider()stretches across the column to split"Account","Settings", and"Sign Out"into distinct bands.Combine it with the stack's spacing
A
Dividerparticipates in normal stack layout, so the container's own spacing applies on both sides of the line. Thespacing: 12on theVStackgives everyDivider()breathing room above and below, turning a flat list ofTextviews into clearly separated groups.Apply view modifiers like any other view
Because
Dividerconforms toView, you can attach standard modifiers to tune its appearance or footprint. Wrapping it in.padding(),.frame(...), or.foregroundColor(...)adjusts its inset, length, or tint the same way those modifiers affect the surroundingTextelements in this layout.
VStack(spacing: 12) for an HStack(spacing: 12) and watch each Divider() flip to a vertical line that separates the Text items side by side.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct DividerDemo: View {
var body: some View {
VStack(spacing: 12) {
Text("Account")
.font(.headline)
Divider()
Text("Settings")
Divider()
Text("Sign Out")
.foregroundColor(.red)
}
.padding()
}
}