SwiftUI中如何按特定布局分组图片并适配视图尺寸

你的方案核心思路没问题，但有几个细节没处理好，导致嵌入ScrollView后布局异常，同时也没考虑横竖屏的布局切换，下面给你梳理修正和优化方向：

原方案的问题点 #

• 右侧VStack里的正方形图片没有设置固定宽度，会导致它们的尺寸自适应内容，无法和左侧1/3宽度的图形成预期的2:1比例
• GeometryReader直接作为外层容器，嵌入ScrollView时会导致尺寸计算偏差（ScrollView的可用高度是动态的）
• 没有处理横竖屏切换时的布局调整逻辑

优化后的实现方案 #

1. 基础布局修正 #

先确保所有图片的尺寸比例正确，考虑间距的影响，避免布局溢出：

import SwiftUI

struct OverviewTiles: View {
    // 用环境变量获取尺寸类，判断横竖屏
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    
    private let spacing: CGFloat = 16
    
    var body: some View {
        ScrollView {
            GeometryReader { geo in
                let totalInnerSpacing = spacing
                let largeSquareWidth = (geo.size.width - totalInnerSpacing) * 0.66
                let smallSquareWidth = (geo.size.width - totalInnerSpacing) * 0.33
                
                VStack(spacing: spacing) {
                    // 第一行：大正方形 + 两个竖排小正方形
                    HStack(spacing: spacing) {
                        squareImage()
                            .frame(width: largeSquareWidth)
                        VStack(spacing: spacing) {
                            squareImage()
                                .frame(width: smallSquareWidth)
                            squareImage()
                                .frame(width: smallSquareWidth)
                        }
                    }
                    
                    // 第二行：长方形 + 正方形
                    HStack(spacing: spacing) {
                        landscapeImage()
                            .frame(width: largeSquareWidth)
                        squareImage()
                            .frame(width: smallSquareWidth)
                    }
                    
                    // 第三行：长方形
                    landscapeImage()
                }
                .padding(.horizontal) // 给整体加左右内边距，避免贴边
            }
            .frame(maxWidth: .infinity)
        }
    }
    
    // 复用正方形图片视图
    private func squareImage() -> some View {
        Image("tiles_square")
            .resizable()
            .scaledToFit()
    }
    
    // 复用长方形图片视图
    private func landscapeImage() -> some View {
        Image("tiles_landscape")
            .resizable()
            .scaledToFit()
    }
}

2. 横竖屏适配逻辑 #

如果需要在横竖屏时调整图片顺序或布局结构，比如横屏时把第一行的两个小正方形改成横排，可以通过horizontalSizeClass判断：

// 修改第一行的布局逻辑
HStack(spacing: spacing) {
    if horizontalSizeClass == .compact { // 竖屏（或窄屏）
        squareImage()
            .frame(width: largeSquareWidth)
        VStack(spacing: spacing) {
            squareImage()
                .frame(width: smallSquareWidth)
            squareImage()
                .frame(width: smallSquareWidth)
        }
    } else { // 横屏（宽屏）
        HStack(spacing: spacing) {
            squareImage()
                .frame(width: smallSquareWidth)
            squareImage()
                .frame(width: smallSquareWidth)
        }
        squareImage()
            .frame(width: largeSquareWidth)
        // 也可以根据需求改成其他排列方式
    }
}

3. 更简洁的Grid布局方案 #

SwiftUI 3.0+支持Grid组件，能更简洁地实现复杂行列比例布局，无需手动计算宽度：

// 示例：用Grid重构核心布局
ScrollView {
    Grid(horizontalSpacing: spacing, verticalSpacing: spacing) {
        // 第一行：1个占2列的正方形 + 2个占1列的正方形
        GridRow {
            squareImage()
                .gridCellColumns(2)
            squareImage()
            squareImage()
        }
        
        // 第二行：占2列的长方形 + 占1列的正方形
        GridRow {
            landscapeImage()
                .gridCellColumns(2)
            squareImage()
        }
        
        // 第三行：占3列的长方形
        GridRow {
            landscapeImage()
                .gridCellColumns(3)
        }
    }
    .padding(.horizontal)
}

关键注意事项 #

• 所有图片用scaledToFit()保证原始比例不变，避免拉伸变形
• 固定间距+内边距让布局更规整，避免内容贴边
• 复用视图函数减少代码冗余，方便后续修改样式

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