GeometryReader in SwiftUI

GeometryReader 可以获取父视图的大小信息,用来适配不同尺寸的容器

再开始今天的主角前,我们先看一个使用普通手段布局的例子。

我们用两个视图来平分整个页面。

scss 复制代码
HStack(spacing: 0) {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: UIScreen.main.bounds.width * 0.8)
                Rectangle()
                    .fill(Color.blue)
            }
            .ignoresSafeArea()

当我们竖屏时,它确实可以正常工作。但是当我们旋转屏幕后就出现了下

的一幕。

可以看到并没有合理的布局我们需要的视图,当我们旋转了屏幕,视图不自动更新布局。那么此时我们就需要使用GeometryReader来解决这个问题了。


利用GeometryReader布局

代码很简单,只需要把布局 视图放在GeometryReader的内部,然后内部视图布局使用GeometryReader返回的结果就可以办到。

scss 复制代码
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把图片布局起来。

scss 复制代码
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 ,否则当视图在中心点的两侧 ,就按照当前位置除以屏幕宽度的一半,来计算百分比

less 复制代码
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()
        }
swift 复制代码
 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

相关推荐
美狐美颜sdk6 小时前
跨平台直播美颜SDK集成实录:Android/iOS如何适配贴纸功能
android·人工智能·ios·架构·音视频·美颜sdk·第三方美颜sdk
恋猫de小郭10 小时前
Meta 宣布加入 Kotlin 基金会,将为 Kotlin 和 Android 生态提供全新支持
android·开发语言·ios·kotlin
泓博11 小时前
Objective-c把字符解析成字典
开发语言·ios·objective-c
Daniel_Coder12 小时前
Xcode 中常用图片格式详解
ios·xcode·swift
瓜子三百克12 小时前
Objective-C 路由表原理详解
开发语言·ios·objective-c
帅次12 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
RyanGo15 小时前
iOS断点下载
ios·swift
蒙小萌199315 小时前
找工作-iOS开发-3年经验-AI协作开发
ios
丶皮蛋菌17 小时前
关于OC与Swift内存管理的解惑
ios
杂雾无尘19 小时前
掌握生死时速:苹果应用加急审核全攻略!
ios·swift·apple