iOS SwiftUI 零基礎之 GeometryReader 使用

在談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