使离屏SwiftUI视图居中

基础概念

SwiftUI 是苹果推出的一个声明式 UI 框架，用于构建 macOS、iOS、watchOS 和 tvOS 应用程序。离屏视图（Offscreen View）是指在屏幕上不可见的视图，通常用于预渲染或后台处理。

类型

SwiftUI 中的离屏视图主要通过 GeometryReader 和 ViewBuilder 来实现。常见的类型包括：

GeometryReader：用于获取视图的几何信息，如大小和位置。
ViewBuilder：用于构建复杂的视图结构。

应用场景

复杂计算：在后台进行复杂的视图计算，避免阻塞主线程。
预加载数据：在后台预加载数据，提升用户界面的响应速度。
动画效果：在后台预渲染动画效果，提升动画的流畅度。

问题及解决方法

问题：如何使离屏 SwiftUI 视图居中？

在 SwiftUI 中，可以使用 GeometryReader 和 alignmentGuide 来实现离屏视图的居中。

示例代码

import SwiftUI

struct CenteredOffscreenView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // 离屏视图
                Color.green
                    .frame(width: 100, height: 100)
                    .background(Color.blue)
                    .alignmentGuide(.center) { d in
                        -d[.leading] + geometry.size.width / 2
                    }
                    .alignmentGuide(.center) { d in
                        -d[.top] + geometry.size.height / 2
                    }
                
                // 主视图
                Text("Main View")
                    .foregroundColor(.white)
                    .font(.largeTitle)
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        CenteredOffscreenView()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}