SwiftUI-GeometryReader - 码农教程

介绍

官方解释：A container view that defines its content as a function of its own size and coordinate space. — 一个容器View，根据其自身大小和坐标定义其内容。
解读
- 本身也是一个容器类型的View。
- 可以自己决定内容的大小与位置。
定义

public struct GeometryReader<Content>: View where Content: View {
    public var content: (GeometryProxy) -> Content
    
    @inlinable public init(@ViewBuilder content: @escaping (GeometryProxy) -> Content) 

    public typealias Body = Never
}

GeometryProxy

GeometryReader中有一个GeometryProxy，它也是一个结构体，定义如下：

public struct GeometryProxy {

    public var size: CGSize { get }

    public subscript<T>(anchor: Anchor<T>) -> T { get }

    public var safeAreaInsets: EdgeInsets { get }

    public func frame(in coordinateSpace: CoordinateSpace) -> CGRect
}

通过GeometryProxy可以拿到父容器布局的相关信息，这个是它能做到自己决定内容的大小与位置的核心，主要作用如下：

可以通过size: CGSize获取宽和高。
可以通过safeAreaInsets获取安全区域相关的信息。
可以通过frame()获取屏幕坐标系的 x 和 y 坐标。

struct ContentView: View {
    
    var body: some View {
        ScrollView {
            ZStack {
                VStack {
                    RoundedRectangle(cornerRadius: 20)
                        .foregroundColor(Color.green)
                        .frame(width: 300, height: 300)
                    
                    RoundedRectangle(cornerRadius: 20)
                        .foregroundColor(Color.red)
                        .frame(width: 300, height: 300)
                    
                    RoundedRectangle(cornerRadius: 20)
                        .foregroundColor(Color.purple)
                        .frame(width: 300, height: 300)
                    
                }
                
                GeometryReader { geometry in
                    VStack {
                        // 尺寸
                        Text("Geometry width: (geometry.size.width)")
                        Text("Geometry height: (geometry.size.height)")
                        
                        // 坐标
                        Text("Geometry X: (geometry.frame(in: .global).origin.x)")
                        Text("Geometry Y: (geometry.frame(in: .global).origin.y)")
                        Text("Geometry minX: (geometry.frame(in: .global).minX)")
                        Text("Geometry maxX: (geometry.frame(in: .global).maxX)")
                        
                        // 安全区域
                        Text("Geometry safeAreaInsets.bottom: (geometry.safeAreaInsets.bottom)")
                        Text("Geometry safeAreaInsets.top: (geometry.safeAreaInsets.top)")
                    }
                }
            }
        }.edgesIgnoringSafeArea(.all) // 观察有无此句的内容变化
    }
}

案例一

GeometryReader的基本用法是读取父 View 建议的大小，然后使用它来布局我们的 View。例如使用GeometryReader做一个自适应比例的彩色矩形。

struct FlowRectangle: View {
    
    var body: some View {
        // 这里用的全部是比例，尺寸是在外面初始化的时候设置的
        GeometryReader { proxy in
            VStack(spacing: 0) {
                Rectangle()
                    .fill(Color.red)
                    .frame(height: 0.5 * proxy.size.height)
                
                HStack(spacing: 0) {
                    Rectangle()
                        .fill(Color.green)
                        .frame(width: 0.5 * proxy.size.width)
                    
                    VStack(spacing: 0) {
                        Rectangle()
                            .fill(Color.blue)
                            .frame(height: 0.25 * proxy.size.height)
                        
                        Rectangle()
                            .fill(Color.yellow)
                            .frame(height: 0.25 * proxy.size.height)
                    }
                    .frame(width: 0.5 * proxy.size.width)
                }
            }
        }
    }
}

struct ContentView: View {
    
    let screenRect = UIScreen.main.bounds
    
    var body: some View {
        VStack {
            // 对比一下3种方式的效果
            FlowRectangle()
                .frame(width: 100, height: 200)
          
            FlowRectangle()
                .frame(width: 200, height: 100)
            
            FlowRectangle()
                .frame(width: screenRect.width, height: screenRect.width)
        }
    }
}

案例二

在一个VStack中垂直摆放两个元素Text和DIYRectangle，其中DIYRectangle的大小为父容器VStack显示完Text后剩余空间的1/3。

struct ContentView: View {
    
    var body: some View {        
        VStack {
            Text("下面是一个矩形")
            
            DIYRectangle()
            
        }.frame(width: 150, height: 100)
         .border(Color.black)
    }
}

struct DIYRectangle: View {
    
    var body: some View {  
        // geometry的类型为GeometryProxy
        GeometryReader { geometry in
            Rectangle()
                .foregroundColor(Color.blue)
                .frame(width: geometry.size.width * 0.3, height: geometry.size.height * 0.3, alignment: .center)
        }      
    }
}