苹果官方定义:A container view that defines its content as a function of its own size and coordinate space.
GeometryReader is a view that gives you access to the size and position of your parent.
SwiftUI布局的核心原理是什么呢? 主要分3个步骤: • 父view提供一个建议的size • 子view根据自身的特性返回一个size • 父view使用子view返回的size对子view进行布局 GeometryReader的基本用法就是读取父View建议的大小, 然后使用它来布局我们的View。 • GeometryReader一个容器View • 可以自己决定内容的大小与位置
例子1: 在一个 VStack 中垂直摆放两个元素 Text 和 MyRectangle, 其中 MyRectangle 的大小为父容器 VStack显示完Text后剩余空间的1/3。
struct ContentView: View { var body: some View { VStack { Text("下面是一个矩形") MyRectangle() }.frame(width: 150, height: 100) .border(Color.black) } }
struct MyRectangle: View { var body: some View { // GeometryReader是去掉Text view之后, 剩余之后的view。 GeometryReader { geometry in Rectangle() .foregroundColor(Color.blue) // 通过geometry可以取得父view的大小(去掉Text view剩余之后的大小)。 .frame(width: geometry.size.width * 0.3, height: geometry.size.height * 0.3, alignment: .center) } } }

例子2: 通过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) // 观察有无此句的内容变化 } }
