SwiftUI自定义视图容器

在 SwiftUI 中，自定义视图容器是创建复用布局组件的重要技术，它定义特定的视图布局逻辑，并让其他视图嵌套在其中。

什么是自定义视图容器

自定义视图容器本质上是一个接受子视图的视图，它定义了这些子视图的排列方式或布局规则。通过这种方式，可以封装复杂的布局逻辑并简化代码。

SwiftUI 提供了 @ViewBuilder，接收多个子视图并构建它们的布局。

简单的自定义视图容器

以下是一个简单的例子：

垂直间隔容器

创建一个可以在子视图之间添加固定间隔的容器。

struct SpacedContainer<Content: View>: View {
    let spacing: CGFloat
    let content: Content

    init(spacing: CGFloat = 10, @ViewBuilder content: () -> Content) {
        self.spacing = spacing
        self.content = content()
    }

    var body: some View {
        VStack(spacing: spacing) {
            content
        }
    }
}

struct ContentView: View {
    var body: some View {
        SpacedContainer(spacing: 20) {
            Text("Hello")
            Text("SwiftUI")
            Text("Custom Container")
        }
    }
}

代码解释

1、SpacedContainer 定义了一个垂直布局容器，其子视图间距由 spacing 参数控制。

2、@ViewBuilder 允许传入多个视图，它们会被自动封装为一个 Content。

3、VStack(spacing:) 是具体的布局实现。

运行结果是一个垂直堆叠的视图，每个视图之间有固定的间距。

复杂的自定义视图容器

可以进一步添加自定义逻辑，比如根据条件选择布局方向。

动态方向容器

根据屏幕方向动态调整布局为水平或垂直。

struct DynamicContainer<Content: View>: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass
    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        Group {
            if horizontalSizeClass == .compact {
                VStack {
                    content
                }
            } else {
                HStack {
                    content
                }
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        DynamicContainer {
            Text("Hello")
            Text("SwiftUI")
        }
    }
}

代码解释

1、horizontalSizeClass 环境变量用于检测屏幕的水平尺寸类别。

2、根据尺寸类别选择布局方向：

在紧凑布局下（iPhone 竖屏），使用 VStack。

在宽屏布局下（iPad 或 iPhone 横屏），使用 HStack。

3、这种容器非常适合响应式设计。

实现自定义排列规则

SwiftUI 提供了 GeometryReader，可以实现更复杂的自定义排列逻辑，比如按网格排列。

自定义网格容器

struct GridContainer<Content: View>: View {
    let columns: Int
    let content: Content

    init(columns: Int, @ViewBuilder content: () -> Content) {
        self.columns = columns
        self.content = content()
    }

    var body: some View {
        GeometryReader { geometry in
            let itemWidth = geometry.size.width / CGFloat(columns)
            LazyVGrid(columns: Array(repeating: .init(.fixed(itemWidth)), count: columns)) {
                content
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        GridContainer(columns: 3) {
            ForEach(1...9, id: \.self) { i in
                Text("Item \(i)")
                    .frame(height: 50)
                    .background(Color.blue)
                    .foregroundColor(.white)
            }
        }
    }
}

代码解释

1、网格布局：使用 LazyVGrid 自动排列子视图。

2、动态宽度计算：通过 GeometryReader 获取容器宽度并分配给每列。

运行结果是一个 3 列的网格布局，每个单元格宽度相等。

总结

自定义视图容器是 SwiftUI 提供的一个强大工具，用于封装布局逻辑和创建可复用的布局组件。

使用 @ViewBuilder 和泛型，可以支持灵活的视图输入。

通过结合 GeometryReader 和环境变量（如 horizontalSizeClass），可以创建响应式和动态布局。

与修饰符相比，自定义容器更适合管理子视图的布局逻辑。

相关文章

1、SwiftUI构建多个视图@ViewBuilder：https://fangjunyu.com/2024/12/23/swiftui构建多个视图viewbuilder/

2、SwiftUI自定义修饰符modifier方法：https://fangjunyu.com/2024/12/15/swiftui自定义修饰符modifier方法/

3、Swift UI 深入理解泛型：https://fangjunyu.com/2024/10/04/swift-ui-%e6%b7%b1%e5%85%a5%e7%90%86%e8%a7%a3%e6%b3%9b%e5%9e%8b/

4、SwiftUI容器视图GeometryReader：https://fangjunyu.com/2024/12/15/swiftui%e5%ae%b9%e5%99%a8%e8%a7%86%e5%9b%begeometryreader/