如何处理嵌套ForEach循环中基于外层循环的Int范围以实现六边形三角布局

核心问题分析 #

你当前代码的问题并非内层循环用row作为范围上限，而是外层VStack与内层HStack的默认布局行为导致每行六边形左对齐，加上未根据六边形几何特性设置正确间距，最终引发显示异常。

优化实现代码 #

struct HexagonView: View {
    let center: CGPoint
    let radius: CGFloat
    
    var body: some View {
        Path { path in
            let angle = CGFloat.pi / 3
            for i in 0..<6 {
                let x = center.x + radius * cos(angle * CGFloat(i) - CGFloat.pi/2)
                let y = center.y + radius * sin(angle * CGFloat(i) - CGFloat.pi/2)
                if i == 0 {
                    path.move(to: CGPoint(x: x, y: y))
                } else {
                    path.addLine(to: CGPoint(x: x, y: y))
                }
            }
            path.closeSubpath()
        }
        .stroke(.blue, lineWidth: 2)
        .fill(.cyan.opacity(0.3))
    }
}

struct HexTriangleView: View {
    let radius: CGFloat = 25
    let rowCount: Int = 7
    
    // 六边形水平相邻中心间距（√3 * 半径）
    var horizontalSpacing: CGFloat {
        radius * sqrt(3)
    }
    
    // 六边形垂直相邻中心间距（1.5 * 半径）
    var verticalSpacing: CGFloat {
        radius * 1.5
    }
    
    var body: some View {
        VStack(spacing: verticalSpacing) {
            ForEach(1...rowCount, id: \.self) { row in
                HStack(spacing: horizontalSpacing) {
                    ForEach(1...row, id: \.self) { _ in
                        HexagonView(center: CGPoint(x: 0, y: 0), radius: radius)
                    }
                }
                .frame(maxWidth: .infinity) // 让每行六边形组居中显示
            }
        }
        .padding()
    }
}

关键调整点 #

• 容器居中处理：给每个内层HStack添加.frame(maxWidth: .infinity)，让每行六边形组自动居中，避免左对齐导致的整体偏移。
• 几何适配间距：根据六边形的几何特性设置水平/垂直间距，确保六边形之间紧密贴合，无空隙或重叠。
• 简化位置控制：利用HStack和VStack的spacing参数自动控制位置，无需手动计算每个六边形的center；若必须保留手动计算逻辑，可参考以下实现：

func getX(col: Int, row: Int) -> CGFloat {
    // 每行起始X偏移，实现整体居中
    let rowOffset = (CGFloat(rowCount) - CGFloat(row)) * horizontalSpacing / 2
    return rowOffset + horizontalSpacing * CGFloat(col - 1)
}

func getY(row: Int) -> CGFloat {
    verticalSpacing * CGFloat(row - 1)
}

使用时需去掉HStack和VStack的spacing参数，避免重复计算。

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