web-dev-qa-db-ja.com

SwiftUI-ハーフモーダル?

私はSwiftUIでiOS13のSafariと同じようにモーダルを再作成しようとしています:

これは次のようになります。

enter image description here

これがSwiftUIで可能かどうか誰かが知っていますか?共有シートと同じように、フルハーフにドラッグするオプションを使用して、小さなハーフモーダルを表示したいと思います。

アドバイスは大歓迎です!

21
ryannn

これは、コンテンツに合わせて調整された、単純な下のシートです。ドラッグせずに、必要に応じて追加するのは比較的簡単です:)

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

以下のように使用します:

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