SwiftUI how to add gray line bar on sheet

Question

I know how to add this element with HStack and rectangle. But...

1) How is it called?

2) Does SwiftUI has this element in the box?

Answer 1

iOS16:

It is added automatically if you have more than one detent, so for just one detent you will have to be explicit about the visibility:

yourContentView
    .presentationDetents([.medium])
    .presentationDragIndicator(.visible)

Answer 2

I don't think there's one accepted name for it; I usually call it a drag handle as it's there to indicate a draggable area to users.

There is no built-in syntax to add one to a sheet. That's the benefit of SwiftUI – simple controls are easy to implement and customize.

For completeness, you can make one using something like the following:

VStack {
    Capsule()
        .fill(Color.secondary)
        .frame(width: 30, height: 3)
        .padding(10)

    // your sheet content here

    Spacer()
}

Answer 3

1. The thing is called a Drag Indicator.
2. With iOS 16+ you can use .presentationDragIndicator(_:) modifier to control its visibility.

Proposals have been made on how to emulate this drag indicator in earlier iOS versions.

As a small addition to the great answers of John M. and happymacaron, this comes even closer:

ZStack(alignment: .top) {
    // NavigationView
    Capsule()
        .fill(Color.secondary)
        .opacity(0.5)
        .frame(width: 35, height: 5)
        .padding(6)
}

Answer 4

To add to John M.'s wonderful answer, you can use a ZStack to place the Capsule on top of the NavigationView. Like this:

ZStack(alignment: .top) {
    // NavigationView
    Capsule()
        .fill(Color.secondary)
        .frame(width: 35, height: 5)
}

I experimented with the size and found width: 35, height: 5 produces a shape that is close to the image.