SwiftUI定义尺寸和位置的CGRect结构

在 SwiftUI 中，CGRect 是一个 Core Graphics 框架中的结构，用于定义矩形的尺寸和位置。虽然 SwiftUI 是一个新的框架，但它与 UIKit 和 Core Graphics 保持兼容性，因此 CGRect 在 SwiftUI 中也常用于处理布局和几何信息。

CGRect 的基本结构

CGRect 是一个矩形的描述，由以下两个部分组成：

1、origin: 一个 CGPoint 类型，表示矩形的左上角位置（x 和 y 坐标）。

2、size: 一个 CGSize 类型，表示矩形的宽度和高度（width 和 height）。

let rect = CGRect(x: 0, y: 0, width: 100, height: 50)

在上面代码中，rect 表示一个左上角位于 (0, 0) 且宽为 100、高为 50 的矩形。

创建 CGRect

1、直接初始化

可以通过指定 origin 和 size 来创建一个 CGRect：

let rect = CGRect(origin: CGPoint(x: 10, y: 20), size: CGSize(width: 100, height: 50))

2、用 x, y, width, height 初始化

更常用的是直接指定位置和大小：

let rect = CGRect(x: 10, y: 20, width: 100, height: 50)

3、默认的 CGRect.zero

CGRect.zero 是一个矩形，起点为 (0, 0)，大小为 (0, 0)：

let zeroRect = CGRect.zero

CGRect 的属性

CGRect 提供了一些有用的属性，便于获取矩形的位置和尺寸信息：

1、origin

矩形左上角的坐标，类型为 CGPoint。

let origin = rect.origin // CGPoint(x: 10, y: 20)

2、size

矩形的宽度和高度，类型为 CGSize。

let size = rect.size // CGSize(width: 100, height: 50)

3、minX、midX、maxX

水平方向上的最小、中间和最大 X 值。

let minX = rect.minX // 10
let midX = rect.midX // 60 (10 + 100/2)
let maxX = rect.maxX // 110 (10 + 100)

4、minY、midY、maxY

垂直方向上的最小、中间和最大 Y 值。

let minY = rect.minY // 20
let midY = rect.midY // 45 (20 + 50/2)
let maxY = rect.maxY // 70 (20 + 50)

5、width 和 height

矩形的宽度和高度。

let width = rect.width // 100
let height = rect.height // 50

CGRect 的方法

1、contains(_:)

检查一个点是否在矩形范围内。

let point = CGPoint(x: 50, y: 30)
let isInside = rect.contains(point) // true

2、intersects(_:)

检查两个矩形是否有重叠。

let anotherRect = CGRect(x: 50, y: 30, width: 60, height: 40)
let isIntersecting = rect.intersects(anotherRect) // true

3、offsetBy(dx:dy:)

将矩形的位置偏移指定的距离。

let movedRect = rect.offsetBy(dx: 20, dy: 30)
print(movedRect.origin) // CGPoint(x: 30, y: 50)

4、insetBy(dx:dy:)

缩小或扩展矩形的大小。

let insetRect = rect.insetBy(dx: 10, dy: 5)
print(insetRect.size) // CGSize(width: 80, height: 40)

5、union(_:)

返回包含两个矩形的最小矩形。

let unionRect = rect.union(anotherRect)
print(unionRect) // CGRect(x: 10, y: 20, width: 100, height: 50)

6、intersection(_:)

返回两个矩形的交集部分。

let intersectionRect = rect.intersection(anotherRect)
print(intersectionRect) // CGRect(x: 50, y: 30, width: 60, height: 40)

在 SwiftUI 中的常见应用场景

1、使用 GeometryReader 获取视图的 CGRect

GeometryReader 可以通过 geometry.frame(in:) 返回视图的 CGRect 信息：

GeometryReader { geometry in
    let frame = geometry.frame(in: .global)
    Text("Frame: \(frame)")
}

显示为：

Frame: (0.0, 59.0, 393.0, 759.0)

frame 的值：

.local：相对于父视图的 CGRect。

.global：相对于屏幕（或窗口）的 CGRect。

2、用于视图动画或动态布局

CGRect 可以帮助动态调整视图的位置或形状。例如，实现弹跳动画时：

struct BouncingView: View {
    @State private var offset: CGFloat = 0

    var body: some View {
        GeometryReader { geometry in
            let rect = geometry.frame(in: .local)
            Circle()
                .frame(width: 50, height: 50)
                .offset(x: rect.midX, y: offset)
                .onAppear {
                    withAnimation(.easeInOut.repeatForever(autoreverses: true)) {
                        offset = rect.maxY - 50
                    }
                }
        }
    }
}

3、检测滚动中的视图位置

在滚动视图中，可以利用 CGRect 的 minY 或 maxY 实现动态效果（如视差动画）：

struct ScrollEffectView: View {
    var body: some View {
        ScrollView {
            ForEach(0..<10) { index in
                GeometryReader { geometry in
                    let minY = geometry.frame(in: .global).minY
                    Text("Item \(index)")
                        .scaleEffect(minY < 100 ? 1.5 : 1.0)
                }
                .frame(height: 100)
            }
        }
    }
}

总结

CGRect 是 SwiftUI 中描述视图几何信息的重要工具，常用于布局、动画和交互中。理解其核心属性（如 origin 和 size）以及相关操作（如 contains 和 intersection）对构建复杂 UI 布局和动画非常有帮助。