GeometryReader 能够获取父视图的大小信息,用来适配不同尺度的容器
再开端今天的主角前,咱们先看一个运用一般手段布局的例子。
咱们用两个视图来平分整个页面。
HStack(spacing: 0) {
Rectangle()
.fill(Color.red)
.frame(width: UIScreen.main.bounds.width * 0.8)
Rectangle()
.fill(Color.blue)
}
.ignoresSafeArea()
当咱们竖屏时,它的确能够正常工作。可是当咱们旋转屏幕后就出现了下
的一幕。
能够看到并没有合理的布局咱们需要的视图,当咱们旋转了屏幕,视图不自动更新布局。那么此时咱们就需要运用GeometryReader来解决这个问题了。
利用GeometryReader布局
代码很简单,只需要把布局 视图放在GeometryReader的内部,然后内部视图布局运用GeometryReader回来的成果就能够办到。
GeometryReader { geo in
HStack(spacing: 0) {
Rectangle()
.fill(Color.red)
.frame(width: geo.size.width * 0.8)
Rectangle()
.fill(Color.blue)
}
.ignoresSafeArea()
}
把设定宽度的代码从UIScreen.bounds.width改成geo.size.width即可完结布局。
成果就是咱们设定一样了。
做一个炫酷作用
咱们做一个图片翻滚时有一定3D旋转的作用。首要咱们先用ScrollerView把图片布局起来。
VStack {
ScrollView(.horizontal,showsIndicators: false) {
HStack {
ForEach(0..<6) { i in
Image("(i)")
.resizable()
.scaledToFill()
.frame(width: 300, height: 280)
.cornerRadius(30)
.padding()
}
}
}
Spacer()
}
咱们想在图片滑动时有一个3D作用, 咱们需要得到当时图片移动的方位, 当图片在中心点时,图片的旋转视点就是0,否则当视图在中心点的两侧,就依照当时方位除以屏幕宽度的一半,来核算百分比。
VStack {
ScrollView(.horizontal,showsIndicators: false) {
HStack {
ForEach(0..<6) { i in
GeometryReader { geo in
Image("(i)")
.resizable()
.scaledToFill()
.frame(width: 300, height: 200)
.cornerRadius(20)
.rotation3DEffect(
Angle(degrees: getPercentage(geo: geo) * 40),
axis: (x: 0.0, y: 1.0, z: 0.0))
}
.frame(width: 300, height: 200)
.padding()
}
}
}
Spacer()
}
func getPercentage(geo: GeometryProxy) -> Double {
let maxDistance = UIScreen.main.bounds.width / 2
let currentX = geo.frame(in: .global).midX
return Double(1 - (currentX / maxDistance))
}
geo.frame(in:.global).midX
的表达式回来了当时视图的大局坐标系中的横向中心方位(X 坐标)。这在核算偏移量、动画作用等方面十分有用。在你供给的函数中,它用于核算滑动偏移量的百分比.
GeometryReader 是一个十分耗费内存的View,它会实时核算方位,会对app性能有影响
大家有什么看法呢?欢迎留言讨论。
大众号:RobotPBQ