GeometryReader

要获得视图的大小，即使不是不可能，也是很困难的。这正是 GeometryReader 可以提供帮助的地方。

GeometryReader 与推出式容器视图类似，可以添加子视图。它允许检查和使用有助于定位其中其他视图的属性。可以访问高度、宽度和安全区域嵌入等属性，这些属性可以帮助你动态设置其中视图的尺寸，使它们在任何尺寸的设备上都能呈现出良好的效果。

基本介绍

GeometryReader 是一个容器视图，它向外推出以填充所有可用空间。您可以使用它来帮助定位其中的项目。

import SwiftUI

struct GeometryReader_Intro: View {
    var body: some View {
        VStack(spacing: 20) {
            HeaderView("GeometryReader", subtitle: "Introduce", desc: "GeometryReader is a container view that pushs out to fill up all available space. You use it to help with positioning items within it.", back: .clear)
            
            GeometryReader { _ in

            }
            .background(.pink)
        }
        .font(.title)
    }
}

#Preview {
    GeometryReader_Intro()
}

效果如下图所示

对齐

GeometryReader 内的子视图，默认情况下左上角对齐。

import SwiftUI

struct GeometryReader_Alignment: View {
    var body: some View {
        VStack(spacing: 20) {
            HeaderView("GeometryReader", subtitle: "Alignment", desc: "Child views within the GeometryReader are aligned in the upper left corner by default.", back: .clear)
            
            GeometryReader { _ in
                Image(systemName: "arrow.up.left")
                    .padding()
                
            }
            .background(.pink)
        }
        .font(.title)
        .foregroundStyle(.white)
    }
}

#Preview {
    GeometryReader_Alignment()
}

效果如下图所示

Layers 图层

GeometryReader 中的子视图将彼此堆叠在一起，这与 ZStack 非常相似。

import SwiftUI

struct GeometryReader_Layers: View {
    var body: some View {
        VStack(spacing: 20) {
            HeaderView("GeometryReader", subtitle: "Layers", desc: "The child views within a GeometryReader will stack on top of each other, much like ZStack.", back: .clear)
            
            GeometryReader { _ in
                Image(systemName: "18.circle")
                    .padding()
                Image(systemName: "19.square")
                    .padding()
                Image(systemName: "20.circle")
                    .padding()
            }
            .background(.pink)
            .foregroundStyle(.white)
        }
        .font(.title)
    }
}

#Preview {
    GeometryReader_Layers()
}

效果如下图所示

获取尺寸

当您需要获取空间的高度和或宽度时，请使用 geometry reader。

import SwiftUI

struct GeometryReader_GettingSize: View {
    var body: some View {
        VStack(spacing: 10) {
            HeaderView("GeometryReader", subtitle: "Getting Size", desc: "Use the geometry reader when you need to get the height and / or width of a space.", back: .clear)
            
            GeometryReader { geometryProxy in
                
                VStack {
                    Text("Width: \(geometryProxy.size.width)")
                    Text("Height: \(geometryProxy.size.height)")
                }
                .padding()
                .foregroundStyle(.white)
            }
            .background(.pink)
            .foregroundStyle(.white)
        }
        .font(.title)
    }
}

#Preview {
    GeometryReader_GettingSize()
}

效果如下图所示

Positioning定位

使用 GeometryProxy 输入参数可帮助将子视图定位在GeometryReader 视图中的不同位置。

import SwiftUI

struct GeometryReader_Positioning: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("GeometryReader").font(.largeTitle)
            Text("Positioning").font(.title).foregroundStyle(.gray)
            Text("Use the GeometryProxy input parameter to help position child views at different locations within the geometry's view.")
                .font(.title)
                .padding()
            
            GeometryReader { geometry in
                Text("Upper Left")
                    .font(.title)
                    .position(x: geometry.size.width / 5, y: geometry.size.height / 10)
                
                Text("Lower Right")
                    .font(.title)
                    .position(x: geometry.size.width - 90, y: geometry.size.height - 40)
            }
            .background(.pink)
            .foregroundStyle(.white)
            
            Text("Note: The position modifier uses the view's center point when setting the X and Y parameters.")
                .font(.title)

        }
    }
}

#Preview {
    GeometryReader_Positioning()
}

效果如下图所示

获取坐标

本地坐标空间将始终为零，需要全局查看以获取当前视图中的正确坐标：

import SwiftUI

struct GeometryReader_GettingCoordinates: View {
    var body: some View {
        
        VStack(spacing: 10) {
            HeaderView("GeometryReader", subtitle: "Getting Coordinates", desc: "Getting the coordinates (x,y) of a geometry view is little different. Take a look at this example:", back: .clear)
                .layoutPriority(1)
            
            GeometryReader { geometry in
                VStack(spacing: 10) {
                    Text("x: \(geometry.frame(in: .local).origin.x)")
                    Text("y: \(geometry.frame(in: .local).origin.y)")
                }
                .foregroundStyle(.white)
            }
            .background(.pink)
            
            Text("The local coordinate space will always give you zeros.")
            Text("You nedd to look globally to get the correct coordinates inside the current view:")
            GeometryReader { geometry in
                VStack(spacing: 10) {
                    Text("x: \(geometry.frame(in: .global).origin.x)")
                    Text("y: \(geometry.frame(in: .global).origin.y)")
                }
                .foregroundStyle(.white)
            }
            .background(.pink)
            .frame(height: 200)
        }
        .font(.title)
        .padding(.horizontal)
    }
}

#Preview {
    GeometryReader_GettingCoordinates()
}

效果如下图所示