如何在 SwiftUI 中从顶部创建可拖动视图？

Question

I am trying to create dragable view from top which is kind of overlay.. I am attaching something same but having bottom sheet but i am looking for Top sheet. When overlay come background should be blur.

I am not sure about how to implement hence dont have code..I tried parent child for List in SwiftUI but that is having diff. Behaviour.

Any example or suggestion is appropriated.

Answer 1

something like this?

struct SheetView: View {
    let title: String
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<30) { item in
                    Text("Item \(item)")
                }
            }
            .listStyle(.plain)
            .navigationTitle(title)
        }
    }
}


struct ContentView: View {
    
    @State private var currentDrag: CGFloat = 0
    @State private var stateDrag: CGFloat = -300
    
    let minDrag: CGFloat = -UIScreen.main.bounds.height + 120
    
    var body: some View {
        ZStack {
            VStack(spacing: 0) {
                Spacer(minLength: 36)
            SheetView(title: "Bottom Sheet")
                .background(.primary)
                .opacity(stateDrag + currentDrag > minDrag ? 0.5 : 1)
                .blur(radius: stateDrag + currentDrag > minDrag ? 5 : 0)
            }
            
            VStack(spacing: 0) {
                SheetView(title: "Top Sheet")
                    .background(.background)
                    .offset(x: 0, y: stateDrag + currentDrag)
                
                Image(systemName: "line.3.horizontal").foregroundColor(.secondary)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(.background)
                    .contentShape(Rectangle())
                    .offset(x: 0, y: stateDrag + currentDrag)

                    .gesture(DragGesture()
                                            .onChanged { value in
                        withAnimation {
                            currentDrag = value.translation.height
                        }
                    }
                                            .onEnded { value in
                        stateDrag += value.translation.height
                        stateDrag = max(stateDrag, minDrag)
                        currentDrag = .zero
                    })
            }
        }
    }
}