I know how to add this element with HStack and Rectangle. But...
How is it called?
Does SwiftUI have this element out of the box?
-
related: stackoverflow.com/questions/69037459/…pkamb– pkamb2022-06-23 23:27:44 +00:00Commented Jun 23, 2022 at 23:27
Add a comment
|
4 Answers
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)
1 Comment
Todd Hoff
Interestingly, the drag indicator is not displayed if there is a Form on the sheet.
- The thing is called a
Drag Indicator. - 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)
}
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()
}
2 Comments
juliushuck
When I place a Navigationview under it, it does not look like in the image tho.
AndiAna
How do you make the background behind the drag bar transparent when used in a .sheet modal?
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.
