如何限制SwiftUI中LazyVGrid的高度并实现宽度自适应？

你的核心需求是让LazyVGrid的高度不超过屏幕高度的0.8倍，同时让网格宽度随高度自动收缩（而非占满屏幕），保持单元格为正方形。当前代码的问题在于，LazyVGrid默认会尽可能填充可用宽度，导致高度被限制后单元格被压缩，无法达到预期效果。

方案一：基于元素数量计算单元格尺寸（通用型） #

这种方法适合元素数量动态变化的场景，通过计算确定单元格大小，直接约束网格的宽高：

import SwiftUI

@main
struct QuestionApp: App {
    var body: some Scene {
        WindowGroup {
            Grid()
        }
    }
}

struct Grid: View {
    let columnCount = 4
    let itemCount = 32
    var columns: [GridItem] {
        Array(repeating: GridItem(.fixed(0), spacing: 0), count: columnCount)
    }
    
    var body: some View {
        GeometryReader { geo in
            let maxGridHeight = geo.size.height * 0.8
            let rowCount = itemCount / columnCount
            let cellSize = maxGridHeight / CGFloat(rowCount)
            
            // 动态生成列配置，设置单元格固定尺寸
            LazyVGrid(columns: columns.map { GridItem(.fixed(cellSize), spacing: $0.spacing) }, 
                      alignment: .center, spacing: 0) {
                ForEach(1..<itemCount+1) { num in
                    Rectangle()
                        .fill(Color.gray.opacity(0.2))
                        .border(Color.black, width: 1)
                        .overlay {
                            Text(String(num))
                        }
                }
            }
            .frame(width: cellSize * CGFloat(columnCount), height: maxGridHeight)
            .position(x: geo.size.width / 2, y: geo.size.height / 2)
        }
    }
}

struct Grid_Previews: PreviewProvider {
    static var previews: some View {
        Grid()
    }
}

关键改动说明：

• 提取列数、元素数量为常量，方便后续修改
• 计算网格最大高度为屏幕高度的0.8倍
• 根据元素总数和列数算出总行数，进而得到正方形单元格的尺寸（单元格高度=网格总高度/行数）
• 动态调整列配置的固定尺寸为单元格大小，确保每个单元格是正方形
• 直接设置网格的宽高（宽度=单元格尺寸×列数），并居中显示

方案二：利用宽高比约束（简洁型） #

如果元素数量固定，网格的宽高比是明确的（列数/行数），可以直接通过宽高比约束实现需求：

import SwiftUI

@main
struct QuestionApp: App {
    var body: some Scene {
        WindowGroup {
            Grid()
        }
    }
}

struct Grid: View {
    var columns: [GridItem]
    
    init() {
        columns = Array(repeating: GridItem(.flexible(), spacing: 0), count: 4)
    }
    
    var body: some View {
        GeometryReader { geo in
            LazyVGrid(columns: columns, alignment: .center, spacing: 0) {
                ForEach(1..<33) { num in
                    Rectangle()
                        .fill(Color.gray.opacity(0.2))
                        .border(Color.black, width: 1)
                        .aspectRatio(1, contentMode: .fit)
                        .overlay {
                            Text(String(num))
                        }
                }
            }
            // 4列8行，网格整体宽高比为4:8=1:2
            .aspectRatio(0.5, contentMode: .fit)
            .frame(maxHeight: geo.size.height * 0.8)
            .position(x: geo.size.width / 2, y: geo.size.height / 2)
        }
    }
}

struct Grid_Previews: PreviewProvider {
    static var previews: some View {
        Grid()
    }
}

关键改动说明：

• 添加.aspectRatio(0.5, contentMode: .fit)，强制网格保持1:2的宽高比（对应4列8行的正方形单元格布局）
• 结合.frame(maxHeight: geo.size.height * 0.8)，网格会在不超过最大高度的前提下，自动计算对应的宽度，避免占满屏幕
• 通过position将网格居中显示

两种方案都能实现你想要的效果：网格高度不超过屏幕的0.8倍，宽度自动收缩，单元格保持正方形。

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