How to change width of Divider in SwiftUI?

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)
    }
}

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.


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)

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)
        }
    }
}

Tags:

Swiftui