SwiftUI 叠加容器 2

一个高度可定制的 SwiftUI 视图容器组件

os swift

中文版说明

目录

概述

SwiftUI Overlay Container 是一个 SwiftUI 视图容器组件。它是一个可定制、高效且方便的视图管理器。

只需简单的配置，SwiftUI Overlay Container 就可以为您完成视图组织、队列处理、过渡、动画、交互、显示样式配置等基本工作，让开发者可以将更多精力投入到应用程序视图本身的实现上。

动机

当我们需要在视图的上层显示新内容时（例如：弹出信息、侧边菜单、帮助提示等），有很多优秀的第三方解决方案可以帮助我们单独实现它，但是没有解决方案可以同时处理不同的情况。

在 SwiftUI 中，描述视图变得非常容易，因此我们可以完全提取上述场景中的显示逻辑，创建一个可以覆盖更多使用场景的库，并帮助开发者组织视图的显示样式和交互逻辑。

特性

快速指南

更多详情，请参阅库中的示例和源代码中的注释。

创建一个容器

在指定视图的顶部创建一个与它尺寸相同的视图容器。

VStack{
    // your view
}
.overlayContainer("containerA", containerConfiguration: AConfiguration())

当不需要附加到视图的视图容器时。

ViewContainer("containerB", configuration: BConfiguration())

在容器中显示视图

在视图容器 containerA 中显示视图 MessageView

.containerView(in: "containerA", configuration: ViewConfiguration(), isPresented: $show, content: MessageView())

使用容器管理器

struct ContentView1: View {
    @Environment(\.overlayContainerManager) var manager
    var body: some View {
        VStack {
            Button("push view in containerB") {
                manager.show(view: MessageView(), in: "containerB", using: ViewConfiguration())
            }
        }
    }
}

关闭指定容器中的所有视图

struct ContentView1: View {
    @Environment(\.overlayContainerManager) var manager
    var body: some View {
        VStack {
            Button("push view in containerB") {
                manager.dismissAllView(in: ["containerA","containerB"], animated: true)
            }
        }
    }
}

知识点

容器

接收和显示视图的组件。至少对于容器，您需要设置：名称、视图显示类型、视图队列类型。

您可以为容器设置默认视图样式，对于视图未指定的样式属性，将使用容器的默认设置。

显示类型

队列类型

配置容器

容器的配置必须至少设置以下属性

struct MyContainerConfiguration:ContainerConfigurationProtocol{
    var displayType: ContainerViewDisplayType = .stacking
    var queueType: ContainerViewQueueType = .multiple
}

其他属性

容器的环境值

每个容器都为容器内部的视图提供了一个环境值 - overlayContainer。 容器内部的视图可以通过此值获取容器的信息（名称、大小、显示类型、队列类型）并执行关闭自身的行为。

struct MessageView: View {
    @Environment(\.overlayContainer) var container
    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .frame(width: 300, height: 10)
            .overlay(
                HStack {
                    Text("container Name:\(container.containerName)")
                    Button("Dismiss me"){
                        container.dismiss()
                    }
                }
            )
    }
}

容器视图

所有 SwiftUI 视图都可以显示在容器中。 您可以为类似功能的视图创建相同的视图配置，或者使特定视图符合 ContainerViewConfigurationProtocol 协议并单独设置它。

配置容器视图

public protocol ContainerViewConfigurationProtocol {
    var alignment: Alignment? { get }
    var tapToDismiss: Bool? { get }
    var backgroundStyle: ContainerBackgroundStyle? { get }
    var backgroundTransitionStyle: ContainerBackgroundTransitionStyle { get }
    var shadowStyle: ContainerViewShadowStyle? { get }
    var dismissGesture: ContainerViewDismissGesture? { get }
    var transition: AnyTransition? { get }
    var autoDismiss: ContainerViewAutoDismiss? { get }
    var disappearAction: (() -> Void)? { get }
    var appearAction: (() -> Void)? { get }
    var animation: Animation? { get }
}

容器管理器

容器管理器是程序代码和容器之间的桥梁。 通过调用容器管理器的特定方法，用户允许指定的容器执行诸如显示视图、关闭视图等任务。

容器管理器的环境值

在 SwiftUI 中，视图代码通过环境值调用容器管理器。

struct ContentView1: View {
    @Environment(\.overlayContainerManager) var manager
    var body: some View {
        VStack {
            Button("push view in containerB") {
                manager.show(view: MessageView(), in: "containerB", using: ViewConfiguration())
            }
        }
    }
}

容器管理器目前提供的方法是。

可阻止的动画

当 animated 设置为 false 时，可以通过直接调用容器管理器或使用 View 修饰符来强制取消过渡动画。

这在处理诸如 Deep Link 之类的场景时很有用。

animation

在 SwiftUI 视图外部使用

如果要在 SwiftUI 视图之外调用容器管理器，可以直接调用 ContainerManager 单例

let manager = ContainerManager.share
manager.show(view: MessageView(), in: "containerB", using: ViewConfiguration())

系统要求

安装

安装 SwiftUIOverlayContainer 的首选方法是通过 Swift Package Manager。

dependencies: [
  .package(url: "https://github.com/fatbobman/SwiftUIOverlayContainer.git", from: "2.0.0")
]

版权

该库是在 MIT 许可下发布的。 有关详细信息，请参见 LICENSE。

帮助和支持

您可以通过创建 Issues 来提供您的反馈或建议。 您也可以在 Twitter 上联系我 @fatbobman。