SwiftUI容器视图GeometryReader

在 SwiftUI 中，GeometryReader 是一个容器视图，主要用于获取父视图的布局信息（如大小和坐标），并基于这些信息调整子视图的布局。

GeometryReader 的功能

提供布局环境中的几何信息，如：

1）父视图的宽度（size.width）。

2）父视图的高度（size.height）。

3）子视图相对于父视图的位置。

允许子视图根据父视图的尺寸和布局动态调整。

语法

GeometryReader { geometry in
    // 通过 `geometry` 获取布局信息
    let width = geometry.size.width
    let height = geometry.size.height
    
    // 使用这些信息自定义子视图
    Text("Width: \(width), Height: \(height)")
        .frame(width: width / 2, height: height / 2)
}

参数：geometry 是 GeometryProxy 类型的实例，包含以下重要属性：

1、size：父视图的大小，类型为 CGSize。

2、frame(in:)：返回视图相对于某个坐标空间的框架，类型为 CGRect。

GeometryProxy 属性详解

1、size

包含视图的宽度和高度。

geometry.size.width
geometry.size.height

2、frame(in:)

获取视图的坐标和尺寸，相对于某个坐标空间（如 .global 或 .local）。

例如：

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

使用场景

1、动态调整子视图布局

struct DynamicLayoutView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Parent Width: \(geometry.size.width)")
                Rectangle()
                    .fill(Color.blue)
                    .frame(width: geometry.size.width * 0.5, height: 50)
            }
        }
        .frame(height: 200)
        .border(Color.gray, width: 2)
    }
}

效果：

Rectangle 的宽度是父视图宽度的一半。

父视图大小变化时，子视图也会动态调整。

2、获取视图的位置和大小

frame(in:) 用于获取视图的具体位置和尺寸：

struct FrameExample: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Local frame: \(geometry.frame(in: .local).debugDescription)")
                Text("Global frame: \(geometry.frame(in: .global).debugDescription)")
            }
        }
        .frame(height: 200)
    }
}

效果：

打印父视图的 local 和 global 坐标信息。

Local frame: (0.0, 0.0, 393.0, 200.0)
Global frame: (0.0, 338.5, 393.0, 200.0)

3、实现响应式布局

通过 GeometryReader 可以轻松实现视图在不同屏幕上的自适应布局。

struct ResponsiveLayout: View {
    var body: some View {
        GeometryReader { geometry in
            if geometry.size.width > 500 {
                HStack {
                    Text("Wide Layout")
                    Spacer()
                }
            } else {
                VStack {
                    Text("Compact Layout")
                    Spacer()
                }
            }
        }
    }
}

效果：

如果宽度大于 500，显示横向布局。

否则，显示纵向布局。

4、在滚动视图中动态调整视图

GeometryReader 可用于滚动视图中的视差效果。

struct ParallaxEffectView: View {
    var body: some View {
        ScrollView {
            ForEach(0..<20) { index in
                GeometryReader { geometry in
                    let offset = geometry.frame(in: .global).minY
                    Image("example")
                        .resizable()
                        .scaledToFill()
                        .frame(height: 200)
                        .offset(y: offset / 5) // 视差效果
                }
                .frame(height: 200)
            }
        }
    }
}

效果：

图像的滚动速度比实际滚动视图稍慢，呈现视差效果。

注意事项

1、GeometryReader 的大小默认填充父视图：

如果没有显式约束 GeometryReader 的大小，它会占据整个父视图的可用空间。

解决方法：用 frame 限制大小。

GeometryReader { geometry in
    Text("Hello, GeometryReader!")
}
.frame(height: 200)

2、性能影响：

在复杂布局中频繁使用 GeometryReader 可能会降低性能，尤其是在滚动视图中。

3、避免嵌套过多的 GeometryReader：

嵌套的 GeometryReader 会增加计算复杂性，尽量简化结构。

总结

GeometryReader 是一个强大的工具，用于获取父视图的几何信息。

它广泛应用于响应式布局、视图位置计算、动态调整子视图布局等场景。

使用时注意性能影响，尽量限制其范围和计算复杂性。

扩展知识

geometry.frame(in:)方法

在 SwiftUI 中，geometry.frame(in:) 是 GeometryProxy 的一个方法，用于获取视图的边界矩形（CGRect）信息，包括位置（origin）和大小（size）。这个方法需要一个坐标空间参数，in: 指定了视图的边界应该相对于哪个坐标空间计算。

坐标参数：.local 和 .global

1、.local

表示当前视图的边界矩形相对于其直接父视图的坐标系。

特点：

原点 (0, 0) 是当前视图所在父视图的左上角。

通常用于描述视图在其父视图内部的布局。

2、.global

表示当前视图的边界矩形相对于整个屏幕的坐标系。

特点：

原点 (0, 0) 是整个应用窗口的左上角（全局坐标系）。

用于描述视图在屏幕上的绝对位置，跨越多个视图层级。

返回值

调用 geometry.frame(in:) 返回一个 CGRect，包含以下信息：

1、 origin：

x：矩形左上角的水平位置。

y：矩形左上角的垂直位置。

2、size：

width：矩形的宽度。

height：矩形的高度。

示例解析

假设有以下代码：

struct FrameExample: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Local frame: \(geometry.frame(in: .local).debugDescription)")
                Text("Global frame: \(geometry.frame(in: .global).debugDescription)")
            }
            .background(Color.blue.opacity(0.3))
        }
        .frame(width: 200, height: 100)
        .background(Color.red.opacity(0.3))
    }
}

GeometryReader 的大小设置为 200×100。

背景颜色的帮助可以直观理解边界和位置。

运行时的坐标输出

1）geometry.frame(in: .local)：

输出结果：

Local frame: (0.0, 0.0, 200.0, 100.0)

含义：

origin：(0.0, 0.0) 表示 GeometryReader 的坐标原点相对于其父视图（红色区域）的左上角。

size：宽度为 200，高度为 100。

2）geometry.frame(in: .global)：

输出结果类似：

Global frame: (96.5, 388.5, 200.0, 100.0)

含义：

origin：(96.5, 388.5) 表示 GeometryReader 的左上角相对于屏幕左上角的位置（绝对位置）。

size：宽度和高度保持不变。

坐标参数的应用场景

1、布局调试

使用 .local 可以检查视图在父视图内的布局是否正确。

使用 .global 可以确认视图在屏幕上的具体位置。

2、动画和交互

在拖拽、缩放等交互中，了解视图的全局位置（.global）可以确保行为在屏幕范围内正确触发。

GeometryReader { geometry in
    let globalY = geometry.frame(in: .global).minY
    if globalY < 0 {
        Text("The view is partially off-screen!")
    }
}

3、滚动效果

滚动视图中经常需要 .global 来实现滚动时的动画或视差效果。

GeometryReader { geometry in
    let offset = geometry.frame(in: .global).minY
    Image("example")
        .offset(y: offset * 0.2) // 视差效果
}

通过灵活使用 .local 和 .global，可以更好地理解视图的布局行为，并开发复杂的 UI 动画和交互效果。