You can set the presentationBackground
to a view with its top part being transparent, e.g. a UnevenRoundedRectangle
with some padding at the top. Then you can just position the image at the top of the sheet.
The image still doesn’t technically “exceed” the bounds of the sheet, but since the top part of the sheet’s background is transparent, it looks as if the image is sticking out of the sheet.
Here is a simple example.
struct ContentView: View {
@State var sheet = false
var body: some View {
Button("Show Sheet") {
sheet = true
}
.sheet(isPresented: $sheet) {
VStack {
Image("my profile pic")
Spacer()
}
.presentationBackground {
UnevenRoundedRectangle(topLeadingRadius: 30, topTrailingRadius: 30)
.fill(.background)
.overlay(alignment: .topTrailing) {
// the close button
Button {
sheet = false
} label: {
Image(systemName: "xmark")
.tint(.gray)
.font(.title)
}
.padding(30)
}
.padding(.top, 50)
}
.presentationDetents([.medium, .large])
// the drag indicator would still appear at the "actual"
// top of the sheet, so we hide it
.presentationDragIndicator(.hidden)
// you can make your own drag indicator with shapes if needed
}
}
}
Output: