一个从屏幕底部滑出的工作表单，它使用 UIKit 来呈现真正的模态视图，但整个动画和 UI 都是由 SwiftUI 驱动的。它使用并提供了 NonAnimatedUIKitModal: UIViewControllerRepresentable 视图来处理模态 UIKit 包装的模态呈现。

开源社区中有很多不同的 SwiftUI 模态视图。我创建这个库是因为许多实现并没有真正将底部工作表单作为模态视图呈现，这导致了一些问题，例如必须在 NavigationView {}.bottomSheet... 上显示模态视图，以避免导航栏位于底部工作表单之上的问题。我遇到的另一个问题是，在某些实现中，呈现和动画是由 UIKit 驱动的。我采用了不同的方法，UIKit 仅用于呈现 SwiftUI 视图，但不驱动任何动画和 UI 内容。

Swift Package Manager 安装 SwiftUIModal 的首选方式是通过 Swift Package Manager。

在 Xcode 中，打开你的项目并导航到 File → Add Packages，粘贴仓库 URL (https://github.com/nonameplum/SwiftUIModal) 并单击 Next。对于 Rules，选择 Up to Next Major Version。单击 Add Package。

底部工作表单的用法与 SwiftUI 的 sheet 或 fullScreenCover 非常相似，都是使用 bottomSheet 方法

struct Modal: View {
    @State private var isPresenting: Bool = false

    var body: some View {
        NavigationView {
            ZStack {
                Button("Show bottom sheet") {
                    isPresenting.toggle()
                }
                .bottomSheet(isPresented: $isPresenting) {
                    ForEach(1 ..< 10) { index in
                        Text("Row \(index)")
                    }
                    .padding([.leading, .trailing])
                }
            }
            .navigationTitle("Navigation title")
        }
    }
}

除此之外，底部工作表单也可以独立使用，例如，通过使用 if 语句并有条件地显示视图

struct NonModal: View {
    @State private var isPresenting: Bool = false

    var body: some View {
        NavigationView {
            ZStack {
                Button("Show bottom sheet") {
                    isPresenting.toggle()
                }
                if isPresenting {
                    BottomSheetView(onDismiss: { isPresenting = false }) {
                        ForEach(1 ..< 10) { index in
                            Text("Row \(index)")
                        }
                        .padding([.leading, .trailing])
                    }
                }
            }
            .navigationTitle("Navigation title")
        }
    }
}

两者之间的区别在于，在第一种情况下，底部工作表单将以模态方式呈现在任何其他视图之上，包括导航栏。

底部工作表单可以使用 bottomSheetConfiguration 视图修饰符进行配置。

.bottomSheet(isPresented: $isVisible) {
    Text("Bottom Sheet Content")
}
.bottomSheetConfiguration(
    .init(
        dismissRatio: 0.5,
        maxOverDrag: 0,
        background: { Color.yellow },
        dim: { Color.blue.opacity(0.3) },
        indicator: {
            RoundedRectangle(cornerRadius: 10)
                .fill(.orange)
                .frame(width: 100, height: 10).padding()
        }
    )
)

SwiftUIModal

为什么

安装

用法

呈现

配置

文档

许可证