SwiftUI currently offers popup views such as sheet, fullScreenCover, alert, action sheet, etc. to enrich UI interactions. However, the variety is somewhat limited. To write code for various popup windows more conveniently, I created a simple SwiftUI library — SwiftUIOverlayContainer.
SwiftUIOverlayContainer has been updated to version 2.0, for details, please see SwiftUIOverlayContainer 2.0
SwiftUIOverlayContainer does not provide any predefined view styles, but it gives you full freedom to implement the visual effects you need. The main purpose of OverlayContainer is to help you complete the basic work of animations, interactions, and style customization, allowing developers to focus their time and energy solely on the code of the view itself.
The library code has been modified for direct use in Xcode 11
The code philosophy is greatly influenced by PartialSheet, and some of its code has been utilized.
How to Use
- Add an OverlayContainerManager instance as an environment object to your Root View in your SceneDelegate or App
@main
struct Test: App {
let manager = OverlayContainerManager()
var body: some Scene {
WindowGroup {
ContentView()
.environmentObject(manager)
}
}
}- 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>)
}
}- In any one of your views, add a reference to the environment object and then just call the
showOverlayView<T>(_ onDismiss: (() -> Void)? = nil, @ViewBuilder content: @escaping () -> T) where T: Viewfunction 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 overlayView")
})Style Explanation
let style2 = OverlayContainerStyle(
alignment: .leading, // Container alignment position
coverColor: Color.gray.opacity(0.3), // Overlay color
shadow:.init (color: Color.black.opacity(0.3), radius: 20, x: 2, y: 0), // Shadow style
blur: nil, // Blur style
animation: .easeInOut, // Animation curve
transition:.move(edge:.leading), // Entrance/exit animation effect
animatable: true, // Whether to display animation
autoHide: nil, // Whether to auto-hide, settable by seconds
enableDrag: true, // Whether to allow swipe to dismiss, currently supports .leading, .trailing, .bottom, .top
clickDismiss: true) // Whether to support dismissing by clicking elsewhere on the screen after displayFor more specific applications, please refer to the code DEMO.
