I have prepared a simple example. If you tap on the button, a sheet will be presented containing the CustomSheetView. Do not behalf on the design itself it is more about the scrolling behaviour. If I want to scroll the list at first the sheet will be dragged to the top notch and afterwards the list can be scrolled.
In a nutshell... e.g. Instagrams comment section can be scrolled without the sheet (if it is a sheet at all) being dragged to the top notch.
struct CustomSheetView: View {
var body: some View {
VStack {
SomeView()
Spacer()
List {
ForEach(1...40, id: \.self) { index in
Text("Item \(index)")
}
}
Spacer()
SomeOtherView()
}
}
}
struct ContentView: View {
@State private var isSheetVisible = false
var body: some View {
Button("Open Sheet") {
isSheetVisible = true
}
.sheet(isPresented: $isSheetVisible, content: {
CustomSheetView()
.presentationDetents([.fraction(0.8), .large])
})
}
}
I tried .allowsHitTesting(false) to somehow tell the UI to not drag the sheet if the list only has to be scrolled.