iOS SwiftUI 零基础之 GeometryReader 使用

GeometryReader 使用

在谈GeometryReader前，我们先聊一聊SwiftUI强大的布局魔法。在大多数情况下，SwiftUI在后台默默的帮我们进行智能化的自动布局，让我们编程生活变得更美好。

GeometryReader 让我们具有工匠精神

苹果的魔法布局保障了整个苹果生态圈的设计水准，但作为一个有创新想法的工匠，我们有时候（其实大多时间）需要表现自己个性，希望对界面布局进行更多的控制。这时候GeometryReader就被设计出来了。

GeometryReader 是什么

下面我先来看看苹果官方的介绍：

一个可以根据其自身大小和坐标空间定义其内容的容器视图。

虽然苹果的介绍实在有些简单，但是与仅显示“无可用概述”的其他条目相比，我们可以认为GeometryReader还是挺幸福的！

苹果官方文档介绍虽然很简单，但是信息量却很大。首先Geometry竟然也是个视图容器，神不神奇？原来名字如此复杂的GeometryReader与我们常用的水平容器(HStack)、垂直容器（VStack）和组合容器（Group）都是一个类型。但是GeometryReader的优势在于他可以自己决定内容的大小与位置。

由于官方没有给出该关键词的中文名称，俺就自己其他起个名字吧，就叫几何容器。

体验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