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

发表于

为您每周带来有关 Swift 和 SwiftUI 的精选资讯!

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

SwiftUIOverlayContainer 已经更新至 2.0 版本,详情请看 SwiftUIOverlayContainer 2.0

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

SwiftUIOverlayContainer

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

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

使用方法

  • Add a OverlayContainerManager instance as an environment object to your Root View in you SceneDelegateor App
Swift
@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:
Swift
struct ContentView: View {

    var body: some View {
       ...
       .addOverlayContainer(style: <OverlayContainerStyle>)
    }
}
  • 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:
Swift
@EnvironmentObject var manager: OverlayContainerManager

...

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

样式说明

Swift
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

我非常期待听到您的想法! 请在下方留下您的评论 , 分享您的观点和见解。或者加入我们的 Discord 讨论群 ,与更多的朋友一起交流。

Fatbobman(东坡肘子)

热爱生活,乐于分享。专注 Swift、SwiftUI、Core Data 及 Swift Data 技术分享。欢迎关注我的社交媒体,获取最新动态。

你可以通过以下方式支持我