How to change DragGesture of sheet for a specific area?

user_9557346 0
Viewed 133

If I have a button that opens a sheet:

Button(action: { show = true }, label: { Text("Open" })
            .sheet(isPresented: $show){
                Text("Sheet view")
            }

the complete sheet is "movable"/has a DragGesture. Is there any way to deactivate this or define the area of this DragGesture? I would like to have it at the upper 10% of the sheet.

enter image description here

swiftui
1 Answers

The possible solution is to use background of sheet (of needed area) with blocked DragGesture.

Here is a demo of approach. Tested with Xcode 12.4 / iOS 14.4

demo

struct TestSheetDraggableArea: View {
    @State private var show = false
    var body: some View {
        Button(action: { show = true }, label: { Text("Open") })
            .sheet(isPresented: $show){
                SheetView()
            }
    }
}

struct SheetView: View {

    var body: some View {
        GeometryReader { gp in
            VStack(spacing: 0) {
                Color.red.overlay(Text("Draggable Area"))
                    .frame(height: gp.size.height * 0.1)
                Color.clear.overlay(
                    Text("Sheet view")      // << content here
                )
                .contentShape(Rectangle())  // makes hit testable
                .gesture(DragGesture())     // << blocks sheet dragging !!!
            }
        }.ignoresSafeArea()
    }
}
user_122990300
Related