SwiftUI - Yarı modal mı?

SwiftUI'de iOS13'teki Safari gibi bir Modal'ı yeniden oluşturmaya çalışıyorum:

Göründüğü gibi:

SwiftUI'de bunun mümkün olup olmadığını bilen var mı? Aynı paylaşım sayfası gibi tam ekrana sürükleme seçeneğiyle birlikte küçük bir yarı modal göstermek istiyorum.

Herhangi bir tavsiye çok takdir edilmektedir!

Yarım modal sayfayı kullanmanıza izin veren özel bir değiştirici içeren bir Swift Paketi yazdım.

Bağlantı burada: https://github.com/AndreaMiotto/PartialSheet

Kullanmaktan veya katkıda bulunmaktan çekinmeyin

Kendinizinkini yapabilir ve bir zstack içine yerleştirebilirsiniz: https://www.mozzafiller.com/posts/swiftui-slide-over-card-like-maps-stocks

struct SlideOverCard<Content: View> : View {
    @GestureState private var dragState = DragState.inactive
    @State var position = CardPosition.top

    var content: () -> Content
    var body: some View {
        let drag = DragGesture()
            .updating($dragState) { drag, state, transaction in
                state = .dragging(translation: drag.translation)
            }
            .onEnded(onDragEnded)

        return Group {
            Handle()
            self.content()
        }
        .frame(height: UIScreen.main.bounds.height)
        .background(Color.white)
        .cornerRadius(10.0)
        .shadow(color: Color(.sRGBLinear, white: 0, opacity: 0.13), radius: 10.0)
        .offset(y: self.position.rawValue + self.dragState.translation.height)
        .animation(self.dragState.isDragging ? nil : .spring(stiffness: 300.0, damping: 30.0, initialVelocity: 10.0))
        .gesture(drag)
    }

    private func onDragEnded(drag: DragGesture.Value) {
        let verticalDirection = drag.predictedEndLocation.y - drag.location.y
        let cardTopEdgeLocation = self.position.rawValue + drag.translation.height
        let positionAbove: CardPosition
        let positionBelow: CardPosition
        let closestPosition: CardPosition

        if cardTopEdgeLocation <= CardPosition.middle.rawValue {
            positionAbove = .top
            positionBelow = .middle
        } else {
            positionAbove = .middle
            positionBelow = .bottom
        }

        if (cardTopEdgeLocation - positionAbove.rawValue) < (positionBelow.rawValue - cardTopEdgeLocation) {
            closestPosition = positionAbove
        } else {
            closestPosition = positionBelow
        }

        if verticalDirection > 0 {
            self.position = positionBelow
        } else if verticalDirection < 0 {
            self.position = positionAbove
        } else {
            self.position = closestPosition
        }
    }
}

enum CardPosition: CGFloat {
    case top = 100
    case middle = 500
    case bottom = 850
}

enum DragState {
    case inactive
    case dragging(translation: CGSize)

    var translation: CGSize {
        switch self {
        case .inactive:
            return .zero
        case .dragging(let translation):
            return translation
        }
    }

    var isDragging: Bool {
        switch self {
        case .inactive:
            return false
        case .dragging:
            return true
        }
    }
}

Yarı modal ve düğmeleri gibi özel iOS 13 içeren bir SwiftUI paketi yazdım.

GitHub deposu: https://github.com/ViktorMaric/HalfModal

İtibariyle Beta 2Beta 3 Viewolarak bir modal sunamazsınız .fullScreen. Olarak sunar .automatic -> .pageSheet. Yine de bir kez düzeltilse bile, size orada ücretsiz olarak sürükleme özelliğini vereceklerinden şüpheliyim. Zaten dokümanlara dahil edilmiş olacaktı.

Kullanabilirsiniz https://stackoverflow.com/a/56880640/467209 şimdilik tam ekran göstermek için. https://gist.github.com/timothycosta/a43dfe25f1d8a37c71341a1ebaf82213.

Daha sonra, sunumdan sonra, bu etkileşimi nasıl yeniden yaratabileceğinize dair hızlı ve kirli bir örnek.

    @State var drag: CGFloat = 0.0

    var body: some View {
        ZStack(alignment: .bottom) {
            Spacer() // Use the full space
            Color.red
                .frame(maxHeight: 300 + self.drag) // Whatever minimum height you want, plus the drag offset
                .gesture(
                    DragGesture(coordinateSpace: .global) // if you use .local the frame will jump around
                        .onChanged({ (value) in
                            self.drag = max(0, -value.translation.height)
                        })
                )
        }
    }

Andre Carrera'nın cevabı harika ve sağladığı bu kılavuzu kullanmaktan çekinmeyin: https://www.mozzafiller.com/posts/swiftui-slide-over-card-like-maps-stocks

SlideOverCard yapısını değiştirdim, böylece kartın nerede durması gerektiğini ölçmek için gerçek cihaz yüksekliğini kullanıyor (ihtiyaçlarınıza göre ayarlamak için bounds.height ile oynayabilirsiniz):

struct SlideOverCard<Content: View>: View {

    var bounds = UIScreen.main.bounds
    @GestureState private var dragState = DragState.inactive
    @State var position = UIScreen.main.bounds.height/2

    var content: () -> Content
    var body: some View {
        let drag = DragGesture()
            .updating($dragState) { drag, state, transaction in
                state = .dragging(translation: drag.translation)
            }
            .onEnded(onDragEnded)

        return Group {
            Handle()
            self.content()
        }
        .frame(height: UIScreen.main.bounds.height)
        .background(Color.white)
        .cornerRadius(10.0)
        .shadow(color: Color(.sRGBLinear, white: 0, opacity: 0.13), radius: 10.0)
        .offset(y: self.position + self.dragState.translation.height)
        .animation(self.dragState.isDragging ? nil : .interpolatingSpring(stiffness: 300.0, damping: 30.0, initialVelocity: 10.0))
        .gesture(drag)
    }

    private func onDragEnded(drag: DragGesture.Value) {
        let verticalDirection = drag.predictedEndLocation.y - drag.location.y
        let cardTopEdgeLocation = self.position + drag.translation.height
        let positionAbove: CGFloat
        let positionBelow: CGFloat
        let closestPosition: CGFloat

        if cardTopEdgeLocation <= bounds.height/2 {
            positionAbove = bounds.height/7
            positionBelow = bounds.height/2
        } else {
            positionAbove = bounds.height/2
            positionBelow = bounds.height - (bounds.height/9)
        }

        if (cardTopEdgeLocation - positionAbove) < (positionBelow - cardTopEdgeLocation) {
            closestPosition = positionAbove
        } else {
            closestPosition = positionBelow
        }

        if verticalDirection > 0 {
            self.position = positionBelow
        } else if verticalDirection < 0 {
            self.position = positionAbove
        } else {
            self.position = closestPosition
        }
    }
}

enum DragState {
    case inactive
    case dragging(translation: CGSize)

    var translation: CGSize {
        switch self {
        case .inactive:
            return .zero
        case .dragging(let translation):
            return translation
        }
    }

    var isDragging: Bool {
        switch self {
        case .inactive:
            return false
        case .dragging:
            return true
        }
    }
}

İşte içeriğine göre ölçeklenen saf alt sayfam. Sürüklemeden, ancak gerekirse eklemek nispeten kolay olmalıdır :)

struct BottomSheet<SheetContent: View>: ViewModifier {
@Binding var isPresented: Bool
let sheetContent: () -> SheetContent

func body(content: Content) -> some View {
    ZStack {
        content

        if isPresented {
            VStack {
                Spacer()

                VStack {
                    HStack {
                        Spacer()
                        Button(action: {
                            withAnimation(.easeInOut) {
                                self.isPresented = false
                            }
                        }) {
                            Text("done")
                                .padding(.top, 5)
                        }
                    }

                    sheetContent()
                }
                .padding()
            }
            .zIndex(.infinity)
            .transition(.move(edge: .bottom))
            .edgesIgnoringSafeArea(.bottom)
        }
    }
}

extension View {
    func customBottomSheet<SheetContent: View>(
        isPresented: Binding<Bool>,
        sheetContent: @escaping () -> SheetContent
    ) -> some View {
        self.modifier(BottomSheet(isPresented: isPresented, sheetContent: sheetContent))
    }
}

ve aşağıdaki gibi kullanın:

.customBottomSheet(isPresented: $isPickerPresented) { DatePicker( "time", selection: self.$time,
                    displayedComponents: .hourAndMinute
                )
                .labelsHidden()
        }