web-dev-qa-db-fra.com

SwiftUI - Half modal?

J'essaie de recréer un Modal comme Safari dans iOS13 dans SwiftUI:

Voici à quoi ça ressemble:

enter image description here

Est-ce que quelqu'un sait si cela est possible dans SwiftUI ? Je veux montrer un petit demi-modal, avec la possibilité de faire glisser en plein écran, tout comme la feuille de partage.

Tout conseil est fort apprécié!

21
ryannn

Voici ma feuille de fond naïve qui s'adapte à son contenu. Sans glisser, mais il devrait être relativement facile à ajouter si nécessaire :)

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))
    }
}

et utilisez comme ci-dessous:

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