SwiftUI中LazyVGrid结合ForEach如何给每列顶部添加横线

实现方案 #

可以通过两种方式实现需求，适配不同场景：

方案1：首行元素单独加顶部边框

该方案适配性最强，列宽调整也不会出现错位，代码如下：

LazyVGrid(columns: Array(repeating: GridItem(spacing: .zero), count: 7), spacing: .zero) {
    ForEach(0..<36) { i in
        Text("\(i)")
            // 让文本撑满当前格子，可根据需求调整最小高度
            .frame(maxWidth: .infinity, minHeight: 44)
            .overlay(alignment: .top) {
                // 仅第一行的7个元素添加顶部横线
                if i < 7 {
                    Rectangle()
                        .fill(.gray)
                        .frame(height: 1)
                }
            }
    }
}

方案2：外层叠加等分横线

如果不需要修改内部元素逻辑，可直接在外层叠加横线，代码更简洁：

LazyVGrid(columns: Array(repeating: GridItem(spacing: .zero), count: 7), spacing: .zero) {
    ForEach(0..<36) { i in
        Text("\(i)")
            .frame(maxWidth: .infinity, minHeight: 44)
    }
}
.overlay(alignment: .top) {
    HStack(spacing: .zero) {
        // 和列数保持一致生成7条等分横线
        ForEach(0..<7) { _ in
            Rectangle()
                .fill(.gray)
                .frame(height: 1)
                .frame(maxWidth: .infinity)
        }
    }
}

两种方案最终效果完全一致，可根据自己的业务逻辑选择即可。

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