如何使用GeometryReader调整SwiftUI卡片在不同尺寸屏幕的适配效果

要实现所有屏幕下卡片比例一致，不需要依赖GeometryReader，直接通过固定宽高比+自适应父容器宽度即可实现，修改方案如下：

修改后的代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            Image("shops")
                .resizable()
                .scaledToFill()
                
            Text("Welcome to MarketInfo")
                .font(.largeTitle)
                .fontWeight(.semibold)
                .foregroundColor(.white)
                .padding(.bottom, 30)
                .padding(.leading, 20) // 可根据需求调整左侧边距
        }
        // 最大宽度设置为屏幕宽度减去左右各20的留白，可自行调整比例
        .frame(maxWidth: UIScreen.main.bounds.width - 40)
        // 固定卡片宽高比和你原始设计的380:270一致，所有设备比例完全相同
        .aspectRatio(380/270, contentMode: .fit)
        .cornerRadius(20)
        .clipped()
        .shadow(radius: 8)
        .padding(.top, 20)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice("iPhone 14 Pro")
            ContentView()
                .previewDevice("iPad mini (6th generation)")
        }
    }
}

关键修改说明 #

• 移除了所有固定宽高的硬编码数值，改为先设置卡片最大宽度为屏幕宽度减去左右预留的边距，保证不同屏幕下卡片两侧都有统一的留白
• 通过.aspectRatio()固定卡片的宽高比和原始设计一致，系统会自动根据宽度计算对应高度，所有设备下卡片比例完全相同
• 简化了布局结构，直接通过ZStack的alignment参数设置文本的对齐规则，不需要多余的VStack和Spacer
• 如果需要文本大小也跟着卡片尺寸自适应，可以把固定的.font(.largeTitle)改为相对计算的尺寸，比如.font(.system(size: UIScreen.main.bounds.width * 0.06))，实现文本大小和卡片比例同步适配

效果图 #

内容的提问来源于stack exchange，提问作者Kaushik