Present sheets as a full bottom drawer

2026-10-03 23:42:46 +08:00
parent 782143e87b
commit 31429e6923
7 changed files with 148 additions and 50 deletions
@@ -0,0 +1,91 @@
+import SwiftUI
+import UIKit
+
+extension View {
+  /// Presents a bottom-anchored drawer: it fills to the screen's bottom edge
+  /// (no gap), shows a dimmed backdrop, and can be dragged down to dismiss.
+  func bottomDrawer<Content: View>(isPresented: Binding<Bool>,
+                                   @ViewBuilder content: @escaping () -> Content) -> some View {
+    BottomDrawerHost(host: self, isPresented: isPresented, content: content)
+  }
+}
+
+private struct BottomDrawerHost<Host: View, Content: View>: View {
+  let host: Host
+  @Binding var isPresented: Bool
+  @ViewBuilder var content: () -> Content
+
+  @State private var dragOffset: CGFloat = 0
+
+  private var bottomInset: CGFloat {
+    for scene in UIApplication.shared.connectedScenes {
+      guard let windowScene = scene as? UIWindowScene else { continue }
+      if let window = windowScene.keyWindow {
+        return window.safeAreaInsets.bottom
+      }
+    }
+    return 0
+  }
+
+  private var maxHeight: CGFloat {
+    for scene in UIApplication.shared.connectedScenes {
+      guard let windowScene = scene as? UIWindowScene else { continue }
+      if let window = windowScene.keyWindow {
+        return window.bounds.height * 0.92
+      }
+    }
+    return 800
+  }
+
+  var body: some View {
+    ZStack(alignment: .bottom) {
+      host
+
+      if isPresented {
+        Color.black.opacity(0.5)
+          .ignoresSafeArea()
+          .onTapGesture { dismiss() }
+          .transition(.opacity)
+
+        VStack(spacing: 0) {
+          Capsule()
+            .fill(Theme.muted.opacity(0.55))
+            .frame(width: 36, height: 5)
+            .padding(.top, 8)
+
+          content()
+            .padding(.top, 14)
+            .padding(.bottom, bottomInset + 16)
+        }
+        .frame(maxWidth: .infinity, alignment: .top)
+        .frame(maxHeight: maxHeight)
+        .background(Theme.surface)
+        .clipShape(UnevenRoundedRectangle(topLeadingRadius: 20, topTrailingRadius: 20, style: .continuous))
+        .offset(y: dragOffset)
+        .gesture(dismissDrag)
+        .transition(.move(edge: .bottom))
+      }
+    }
+    .ignoresSafeArea()
+    .animation(.spring(response: 0.32, dampingFraction: 0.86), value: isPresented)
+  }
+
+  private func dismiss() {
+    isPresented = false
+    dragOffset = 0
+  }
+
+  private var dismissDrag: some Gesture {
+    DragGesture()
+      .onChanged { value in
+        dragOffset = max(0, value.translation.height)
+      }
+      .onEnded { value in
+        if value.translation.height > 120 || value.predictedEndTranslation.height > 200 {
+          dismiss()
+        } else {
+          dragOffset = 0
+        }
+      }
+  }
+}