SwiftUI中如何结合GeometryReader与水平ScrollView实现App Store式分页布局？

核心问题分析 #

你的代码存在两个关键问题导致滚动失效和布局异常：

• 布局结构错误：将每行数据单独放在HStack中，而非把整个“页面”作为水平滚动的单元，导致ScrollView无法正确识别可滚动的内容范围
• GeometryReader未正确绑定父容器尺寸，且单元格宽度设置逻辑破坏了滚动布局

解决方案 #

重新组织布局结构，将每个“页面”（包含3行应用条目）作为水平滚动的独立单元，每个页面宽度设为屏幕的90%，同时修正数据排列逻辑：

struct TestView: View {
    let totalItems = 4 // 实际应为数据源数组的count
    let numberOfRows: Int = 3
    let pageWidthRatio: CGFloat = 0.9 // 页面占屏幕宽度的比例
    var numberOfPages: Int // 总页面数
    
    init() {
        // 计算总页面数：向上取整，确保所有条目都能展示
        numberOfPages = (totalItems + numberOfRows - 1) / numberOfRows
    }
    
    var body: some View {
        GeometryReader { reader in
            let screenWidth = reader.size.width
            let pageWidth = screenWidth * pageWidthRatio
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: screenWidth * 0.05) { // 页面之间留5%屏幕宽度的间隙
                    ForEach(0..<numberOfPages, id: \.self) { pageIndex in
                        // 每个页面是一个包含3行的VStack
                        VStack(spacing: 12) { // 行间距
                            ForEach(0..<numberOfRows, id: \.self) { rowIndex in
                                let itemIndex = pageIndex * numberOfRows + rowIndex
                                if itemIndex < totalItems {
                                    CellView()
                                } else {
                                    // 空单元格占位，保持布局高度一致
                                    EmptyCellView()
                                }
                            }
                        }
                        .frame(width: pageWidth)
                        .background(Color.blue.opacity(0.1)) // 蓝色背景用于测试，可移除
                    }
                }
                .padding(.horizontal, screenWidth * 0.05) // 左右留5%屏幕宽度的边距
            }
        }
        .frame(height: 200) // 固定高度，可根据需求调整
    }
}

struct CellView: View {
    let imageSize: CGFloat = 50
    let cellHeaderText: String = "应用标题"
    let cellHeaderSubtext: String = "副标题"
    
    var body: some View {
        HStack(spacing: 10) {
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.green)
                .frame(width: imageSize, height: imageSize)
            VStack(alignment: .leading, spacing: 4) {
                Text(cellHeaderText)
                    .font(.body)
                    .fontWeight(.semibold)
                Text(cellHeaderSubtext)
                    .font(.subheadline)
                    .fontWeight(.light)
                    .foregroundColor(.secondary)
            }
            Spacer() // 让内容靠左，右侧留白
        }
    }
}

struct EmptyCellView: View {
    var body: some View {
        HStack {
            Spacer()
        }
        .frame(height: 50) // 和CellView高度保持一致
    }
}

关键修改说明 #

1. 页面结构重构：将每个页面封装为VStack（包含3行），所有页面放在ScrollView的HStack中，确保水平滚动逻辑正常
2. 尺寸计算优化：利用GeometryReader获取屏幕宽度，直接计算页面宽度和间隙，保证布局自适应
3. 数据索引修正：通过页面索引+行索引计算对应的数据条目，避免原逻辑中的索引错误
4. 滚动提示优化：页面之间保留间隙，同时左右添加边距，让用户清晰看到还有下一页内容
5. 空单元格简化：EmptyCellView只保留高度占位，减少不必要的视图层级

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