如何在SwiftUI LazyVGrid中实现跨多行多列的自定义布局？

要实现centerCellView跨3列2行并与网格正确对齐，你需要利用SwiftUI原生的行列跨行修饰符替代自定义frame，同时调整被覆盖单元格的处理逻辑，具体修改如下：

关键调整点 #

• 使用.gridCellRows(2)实现跨2行布局，让网格自动管理视图尺寸，避免自定义frame导致的对齐偏差
• 移除自定义的frame(width:height:)，依赖网格的行列跨度自动计算视图大小
• 移除被覆盖单元格的EmptyView的frame设置，避免保留多余的单元格空间
• 将GeometryReader中的背景色改为通过.background设置，防止覆盖LazyVGrid

修改后的完整代码 #

private func gridSection() -> some View {
    let spacing: CGFloat = 10
    let columns: [GridItem] = Array(repeating: GridItem(.flexible(), spacing: spacing), count: gridColumns)
    
    return GeometryReader { geometry in
        let totalSpacing = spacing * CGFloat(gridColumns - 1)
        let cellSize = (geometry.size.width - totalSpacing - 20) / CGFloat(gridColumns)
        
        LazyVGrid(columns: columns, spacing: spacing) {
            ForEach(0..<(gridRows * gridColumns), id: \.self) { index in
                if index == 6 {
                    centerCellView(size: cellSize)
                        .gridCellColumns(3)
                        .gridCellRows(2)
                        .gridCellAnchor(.topLeading)
                } else if [7, 8, 11, 12, 13].contains(index) {
                    EmptyView()
                } else {
                    normalCellView(size: cellSize)
                }
            }
        }
        .padding(.horizontal, 10)
        .padding(.vertical, 20)
        .background(Color("FFEA6D"))
        .onAppear {
            gridCellSize = cellSize
        }
    }
    .frame(height: gridCellSize * CGFloat(gridRows) + spacing * CGFloat(gridRows - 1) + 40)
}

private func centerCellView(size: CGFloat) -> some View {
    RoundedRectangle(cornerRadius: 20)
        .fill(Color("FFEA6D"))
        .stroke(isFlipped ? Color("12B754") : Color("FF403D"), lineWidth: 2)
        .overlay(
            Text(isFlipped ? "180.00¢" : "0.00¢")
                .font(.system(size: 20, weight: .bold))
                .foregroundColor(isFlipped ? Color("12B754") : Color("FF403D"))
        )
}

private func normalCellView(size: CGFloat) -> some View {
    Circle()
        .stroke(isFlipped ? Color("12B754") : Color("FF403D"), lineWidth: 2)
        .frame(width: size, height: size)
        .overlay(
            Image("generic_avatar")
                .resizable()
                .scaledToFill()
                .foregroundColor(isFlipped ? Color("44BD86") : Color("FF8673"))
                .frame(width: size * 0.9, height: size * 0.9)
                .clipShape(Circle())
        )
        .rotation3DEffect(
            .degrees(isFlipped ? 180 : 0),
            axis: (x: 0.0, y: 1.0, z: 0.0),
            perspective: 0.3
        )
        .animation(.spring(response: 0.5, dampingFraction: 0.85), value: isFlipped)
}

额外说明 #

• gridCellAnchor(.topLeading)确保跨行列的视图从起始单元格的左上角开始布局，避免偏移
• 移除自定义frame后，网格会根据行列跨度自动计算视图的宽高，完全匹配网格的单元格尺寸和间距，解决对齐问题
• 被覆盖的单元格直接返回EmptyView()，不会占用网格空间，消除重叠干扰

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