How to change width of Divider in SwiftUI? - swiftui

Question

On few screens of my SwiftUI app I am using Divider() between few elements. This Divider is rendered as a very thin grey (or black?) line. I am guessing 1 point. How can I change the width of Divider()?

Answer 1

You can create any divider you wish, colors, width, content... As in below example.
struct ExDivider: View {
let color: Color = .gray
let width: CGFloat = 2
var body: some View {
Rectangle()
.fill(color)
.frame(height: width)
.edgesIgnoringSafeArea(.horizontal)
}
}

Answer 2

For anyone interested, I modified accepted answer with support for both horizontal and vertical directions, as well as used original Divider colors with support for Dark Mode:
struct ExtendedDivider: View {
var width: CGFloat = 2
var direction: Axis.Set = .horizontal
#Environment(\.colorScheme) var colorScheme
var body: some View {
ZStack {
Rectangle()
.fill(colorScheme == .dark ? Color(red: 0.278, green: 0.278, blue: 0.290) : Color(red: 0.706, green: 0.706, blue: 0.714))
.applyIf(direction == .vertical) {
$0.frame(width: width)
.edgesIgnoringSafeArea(.vertical)
} else: {
$0.frame(height: width)
.edgesIgnoringSafeArea(.horizontal)
}
}
}
}
Bonus, this snippet uses applyIf syntax:
extension View {
#ViewBuilder func applyIf<T: View>(_ condition: #autoclosure () -> Bool, apply: (Self) -> T, else: (Self) -> T) -> some View {
if condition() {
apply(self)
} else {
`else`(self)
}
}
}

Answer 3

This worked for me:
Divider().frame(maxWidth: 100)
That was about a third of the width of the screen on portrait mode on an iPhone 11.

Answer 4

This is way late but...adding a background color to height will present a thicker Divider(). The divider is still razor thin within the image but the desired effect works.
Divider().frame(width: 300,height: 10).background(Color.blue)

Answer 5

I found this works best...
Group {
Divider()
.frame(height: 2.0)
.background(Color.blue)
}
.frame(width: 100)
once you place the Divider into the group, you can alter the surrounding area of the Divider by altering the Group
This would make the divider line 2 px high, and 100 px long

Answer 6

You can adjust the thickness of a Divider using frame(width, height) depending on if it is a vertical or horizontal Divider.
If you have a vertical Divider, then you can use frame(height: ?) to adjust the thickness. If you have a horizontal Divider, then you can use frame(width: ?). Along with setting the frame width or height you will also need to user the overlay modifier to give the Divider a color (even if you leave it grey).
example:
Divider()
.frame(height: 5)
.overlay(.gray)
*See this blog for more Divider customization
https://sarunw.com/posts/swiftui-divider/#:~:text=of%20a%20divider.-,Adjust%20SwiftUI%20Divider%20Thickness,-SwiftUI%20divider%20has

Answer 7

struct AppDivider: View {
var color: Color =.gray
var lineWidth: CGFloat = 1
var body: some View {
Divider()
.frame(height: lineWidth)
.overlay(color)
}
}
struct AppDivider_Previews: PreviewProvider {
static var previews: some View {
VStack {
AppDivider()
AppDivider(color: .red, lineWidth: 5)
}
}
}