SwiftUIOverlayContainer ——可以实现各种自定义样式弹出视图的 SwitUI 库

SwiftUI 目前可以提供 sheet,fullScreenCover,alert,actionsheet 等弹出视图用于丰富 UI 交互。不过种类还是有些单调。为了能够更方便的编写各种弹出式窗口的代码，我写了一个简单的 SwiftUI 库 —— SwiftUIOverlayContainer。

SwiftUIOverlayContainer 本身并不提供任何预置的视图样式，不过通过它，你有充分的自有度来实现自己需要的视图效果。OverlayContainer 的主要目的在于帮助你完成动画、交互、样式定制等基础工作，使开发者能够将时间和精力仅需投入在视图本身的代码上。

健康笔记 - 新生活从记录开始

50% OFF for WWDC23

健康笔记是一款智能的数据管理和分析工具，让您完全掌控自己和全家人的健康信息。作为慢性病患者，肘子深知健康管理的重要与难度。创建健康笔记的初心，就是要为您提供一款轻松高效的健康信息记录与分析工具

推荐

SwiftUIOverlayContainer

库代码已经修改可以直接在 xcode11 下使用

代码思路受到了 PartialSheet 很大的影响，并使用了其部分代码。

使用方法

1. Add a OverlayContainerManager instance as an environment object to your Root View in you SceneDelegateor App

@main
struct Test: App {
    let manager = OverlayContainerManager()
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(manager)
        }
    }
}

1. Add the OverlayView to your Root View, and if you want give it a style. In your RootView file at the end of the builder add the following modifier:

struct ContentView: View {

    var body: some View {
       ...
       .addOverlayContainer(style: <OverlayContainerStyle>)
    }
}

1. In anyone of your views add a reference to the environment object and than just call the showOverlayView<T>(_ onDismiss: (() -> Void)? = nil, @ViewBuilder content: @escaping () -> T) where T: View func whenever you want like this:

@EnvironmentObject var manager: OverlayContainerManager

...

Button(action: {
    self.manager.showOverlayView({
        print("dismissed")
    }) {
         VStack{
            Text("This is Overlay View")
         }
    }
}, label: {
    Text("Show overlyView")
})

样式说明

let style2 = OverlayContainerStyle(
                                   alignment: .leading,  //容器对齐位置
                                   coverColor: Color.gray.opacity(0.3), //覆盖色
                                   shadow:.init (color: Color.black.opacity(0.3), radius: 20, x: 2, y: 0), //阴影样式
                                   blur: nil,  //模糊样式
                                   animation: .easeInOut ,  //动画曲线
                                   transition:.move(edge:.leading),  //进出动画效果
                                   animatable: true,  //是否显示动画
                                   autoHide: nil,  //是否自动隐藏，可设置秒数
                                   enableDrag: true,  //是否允许滑动取消，目前只支持 .leading,.trailing,.bottom,.top
                                   clickDismiss: true) //是否支持显示后，点击屏幕其他位置取消

更多具体应用，请参看 代码 DEMO