GeometryReader 使用

在談GeometryReader前晒来，我們先聊一聊SwiftUI強(qiáng)大的布局魔法钞诡。在大多數(shù)情況下，SwiftUI在后臺(tái)默默的幫我們進(jìn)行智能化的自動(dòng)布局湃崩，讓我們編程生活變得更美好荧降。

GeometryReader 讓我們具有工匠精神

蘋果的魔法布局保障了整個(gè)蘋果生態(tài)圈的設(shè)計(jì)水準(zhǔn)，但作為一個(gè)有創(chuàng)新想法的工匠攒读，我們有時(shí)候（其實(shí)大多時(shí)間）需要表現(xiàn)自己個(gè)性朵诫，希望對(duì)界面布局進(jìn)行更多的控制。這時(shí)候GeometryReader就被設(shè)計(jì)出來了薄扁。

GeometryReader 是什么

下面我先來看看蘋果官方的介紹：

一個(gè)可以根據(jù)其自身大小和坐標(biāo)空間定義其內(nèi)容的容器視圖剪返。

雖然蘋果的介紹實(shí)在有些簡單，但是與僅顯示“無可用概述”的其他條目相比泌辫，我們可以認(rèn)為GeometryReader還是挺幸福的随夸！

蘋果官方文檔介紹雖然很簡單，但是信息量卻很大震放。首先Geometry竟然也是個(gè)視圖容器宾毒，神不神奇？原來名字如此復(fù)雜的GeometryReader與我們常用的水平容器(HStack)殿遂、垂直容器（VStack）和組合容器（Group）都是一個(gè)類型诈铛。但是GeometryReader的優(yōu)勢(shì)在于他可以自己決定內(nèi)容的大小與位置乙各。

由于官方?jīng)]有給出該關(guān)鍵詞的中文名稱，俺就自己其他起個(gè)名字吧幢竹，就叫幾何容器耳峦。

體驗(yàn)GeometryReader

體驗(yàn)GeometryReader

接下來我們來體驗(yàn)一下GeometryReader的強(qiáng)大吧，讓我們來做一個(gè)可以動(dòng)的卡片效果吧

卡片代碼

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("教程包括實(shí)時(shí)資訊和基礎(chǔ)技能兩部分")
                    .font(.system(size: 22))
            }
            VStack{
                ScrollView(.horizontal, showsIndicators: false) {
                    Thumbnail()
                }
            }
            Spacer()
        }.background(
            Image("back")
            .resizable()
            //.scaledToFit()
            
        )
    }
}

參考文獻(xiàn)

https://swiftui-lab.com/geometryreader-to-the-rescue/

更多SwiftUI和iOS資訊與技巧請(qǐng)關(guān)注

http://xiaozhuanlan.com/icloudend

歡迎加入技術(shù)交流群
QQ:3365059189
SwiftUI技術(shù)交流QQ群:518696470