SwiftUI LazyVGrid内容缺失问题排查求助

你的问题出在LazyVGrid的列定义和内部元素数量/结构不匹配，导致布局错乱，内容缺失。

核心问题分析 #

你定义了11列的columns数组，但在LazyVGrid的内容循环中，每一行的元素生成逻辑错误：

• 每一行开头先添加了一个占整行高的竖线（对应第一列），然后每个cell后又添加了一个竖线，这会导致元素总数与列数的对应关系完全错位，最终出现内容被挤压、缺失的情况。
• 同时，cell内部的底部横线和行之间的竖线逻辑混乱，和列定义的网格线列重复冲突。

修复后的代码 #

struct StatisticsView: View {
    
    private let columnMinWidths: [CGFloat] = [120, 50, 50, 50, 50]
    private let rowHeight: CGFloat = 40
    private let thinGridlineSize: CGFloat = 0.5
    private let thickGridlineSize: CGFloat = 2
    private let lineColour = Color.accentColor
    
    private let columns: [GridItem]
    
    private let rowContents = [
        ["Player's name", "Graham", "John", "Archie", ""],
        ["Round 1", "2", "3", "1", ""],
        ["Round 2", "3", "-", "2", ""],
        ["Round 3", "1", "2", "4", ""],
        ["Round 4", "2", "1", "1", ""]
    ]
    
    init() {
        self.columns = [
            GridItem(.fixed(thickGridlineSize), spacing: 0),
            GridItem(.flexible(minimum: columnMinWidths[0]), spacing: 0),
            GridItem(.fixed(thickGridlineSize), spacing: 0),
            GridItem(.flexible(minimum: columnMinWidths[1]), spacing: 0),
            GridItem(.fixed(thinGridlineSize), spacing: 0),
            GridItem(.flexible(minimum: columnMinWidths[2]), spacing: 0),
            GridItem(.fixed(thinGridlineSize), spacing: 0),
            GridItem(.flexible(minimum: columnMinWidths[3]), spacing: 0),
            GridItem(.fixed(thinGridlineSize), spacing: 0),
            GridItem(.flexible(minimum: columnMinWidths[4]), spacing: 0),
            GridItem(.fixed(thickGridlineSize), spacing: 0),
        ]
    }
    
    var body: some View {
        VStack(spacing: 0) {
            // top horizontal gridline
            lineColour.frame(height: thickGridlineSize)
            LazyVGrid(columns: columns, alignment: .leading, spacing: 0) {
                ForEach(0..<rowContents.count, id: \.self) { row in
                    // 严格按照columns的顺序生成每一行的元素
                    // 第1列：左侧厚竖线
                    lineColour.frame(height: rowHeight)
                    // 第2列：第一个单元格内容
                    cellContent(for: rowContents[row][0])
                    // 第3列：厚竖线
                    lineColour.frame(height: rowHeight)
                    // 第4列：第二个单元格内容
                    cellContent(for: rowContents[row][1])
                    // 第5列：细竖线
                    lineColour.frame(height: rowHeight)
                    // 第6列：第三个单元格内容
                    cellContent(for: rowContents[row][2])
                    // 第7列：细竖线
                    lineColour.frame(height: rowHeight)
                    // 第8列：第四个单元格内容
                    cellContent(for: rowContents[row][3])
                    // 第9列：细竖线
                    lineColour.frame(height: rowHeight)
                    // 第10列：第五个单元格内容
                    cellContent(for: rowContents[row][4])
                    // 第11列：右侧厚竖线
                    lineColour.frame(height: rowHeight)
                }
            }
            // bottom horizontal gridline
            lineColour.frame(height: thickGridlineSize)
        }
        .padding(.horizontal, 8)
    }
    
    // 抽离单元格内容的复用视图
    private func cellContent(for text: String) -> some View {
        VStack(spacing: 0) {
            Text(text)
                .font(.caption2)
                .frame(height: rowHeight - thinGridlineSize)
                .frame(maxWidth: .infinity, alignment: .leading) // 确保内容占满列宽
            lineColour.frame(height: thinGridlineSize)
        }
    }
}

关键修复点 #

• 严格匹配列与元素：每一行的元素数量和顺序完全对应columns数组的11列，确保每个元素落在正确的列位置上。
• 复用单元格视图：将单元格内容抽离成单独的方法，避免重复代码，同时保证每个单元格的底部横线统一。
• 添加列宽填充：在单元格文本的frame中加入maxWidth: .infinity，让内容占满列宽，避免布局空白。

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