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)
}
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读