在談GeometryReader前,我們先聊一聊SwiftUI強大的佈局魔法。在大多數情況下,SwiftUI在後臺默默的幫我們進行智能化的自動佈局,讓我們編程生活變得更美好。
GeometryReader 讓我們具有工匠精神
蘋果的魔法佈局保障了整個蘋果生態圈的設計水準,但作爲一個有創新想法的工匠,我們有時候(其實大多時間)需要表現自己個性,希望對界面佈局進行更多的控制。這時候GeometryReader就被設計出來了。
GeometryReader 是什麼
下面我先來看看蘋果官方的介紹:
一個可以根據其自身大小和座標空間定義其內容的容器視圖。
雖然蘋果的介紹實在有些簡單,但是與僅顯示“無可用概述”的其他條目相比,我們可以認爲GeometryReader還是挺幸福的!
蘋果官方文檔介紹雖然很簡單,但是信息量卻很大。首先Geometry竟然也是個視圖容器,神不神奇?原來名字如此複雜的GeometryReader與我們常用的水平容器(HStack)、垂直容器(VStack)和組合容器(Group)都是一個類型。但是GeometryReader的優勢在於他可以自己決定內容的大小與位置。
由於官方沒有給出該關鍵詞的中文名稱,俺就自己其他起個名字吧,就叫幾何容器。
體驗GeometryReader
接下來我們來體驗一下GeometryReader的強大吧,讓我們來做一個可以動的卡片效果吧
卡片代碼
struct Thumbnail : View {
var body : some View {
VStack {
HStack(spacing: 50) {
ForEach(1..<8) { item in
GeometryReader { geometry in
Image("\(item)")
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(10)
.shadow(color: Color.gray, radius: 10, x: 0, y: 0)
.rotation3DEffect(Angle(degrees: Double(geometry.frame(in: .global).minX - 20) / 40), axis: (x: 20, y: 20, z: 20))
}
.frame(width: 370, height: 400)
.padding(20)
}
}
}
}
}
主界面
struct ContentView: View {
var body: some View {
VStack{
Spacer()
Spacer()
VStack{
Text("SwiftUI2020教程")
.font(.largeTitle)
.padding()
Text("教程包括實時資訊和基礎技能兩部分")
.font(.system(size: 22))
}
VStack{
ScrollView(.horizontal, showsIndicators: false) {
Thumbnail()
}
}
Spacer()
}.background(
Image("back")
.resizable()
//.scaledToFit()
)
}
}
參考文獻
https://swiftui-lab.com/geometryreader-to-the-rescue/
更多SwiftUI和iOS資訊與技巧請關注
http://xiaozhuanlan.com/icloudend
歡迎加入技術交流羣
QQ:3365059189
SwiftUI技術交流QQ羣:518696470