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

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

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

健康笔记是我开发的一个iOS app,主要服务于有长期健康管理需求的人士。可为全家不同成员创建各自的笔记,允许使用者自定义数据类型以记录各种健康数据。

推广

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

本博客所有文章除特别声明外,均采用CC 4.0许可协议。转载请注明出处和作者。

关注微信公共号肘子的Swift记事本或在推特上关注@fatbobman,永远不会错过新内容! 您的支持和鼓励将为我的博客写作增添更多的动力! 如果您或身边的朋友有健康数据管理的需求,请使用我开发的app【健康笔记】,正是因为它我才创建了这个博客。

关注