SwiftUI 中 LazyVGrid 内元素如何居中排列且保留固定间距

问题原因 #

你当前使用GridItem(.adaptive(minimum: 30))的布局逻辑是：系统会先根据父视图可用宽度，自动计算最多可容纳的列数，每列宽度会自动拉伸到均分总宽度，所有列内元素默认左对齐，所以即使设置了LazyVGrid的alignment为.center，也仅能实现单列内元素的居中，无法让不足列数的行整体居中。

解决方案（适配iOS 16+，完全匹配需求） #

因为你的场景是展示数量不固定的字符，不需要懒加载能力，推荐用SwiftUI的Layout协议自定义一个支持自动换行、内容居中的流式布局，完全保留你需要的元素间距规则。

第一步：定义居中流式布局

struct CenterFlowLayout: Layout {
    // 元素之间的横向/纵向间距，可自定义
    var spacing: CGFloat = 10
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let maxWidth = proposal.width ?? 0
        var height: CGFloat = 0
        var currentRowWidth: CGFloat = 0
        var currentRowHeight: CGFloat = 0
        
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            if currentRowWidth + subviewSize.width + spacing > maxWidth {
                // 触发换行
                height += currentRowHeight + spacing
                currentRowWidth = subviewSize.width
                currentRowHeight = subviewSize.height
            } else {
                currentRowWidth += subviewSize.width + spacing
                currentRowHeight = max(currentRowHeight, subviewSize.height)
            }
        }
        height += currentRowHeight
        return CGSize(width: maxWidth, height: height)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var currentY = bounds.minY
        var currentRow: [LayoutSubview] = []
        var currentRowWidth: CGFloat = 0
        var currentRowHeight: CGFloat = 0
        
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            if currentRowWidth + subviewSize.width + spacing > bounds.width {
                // 当前行元素整体居中放置
                let rowOffset = (bounds.width - currentRowWidth + spacing) / 2
                var x = bounds.minX + rowOffset
                for item in currentRow {
                    let itemSize = item.sizeThatFits(.unspecified)
                    item.place(at: CGPoint(x: x, y: currentY + (currentRowHeight - itemSize.height)/2), proposal: ProposedViewSize(itemSize))
                    x += itemSize.width + spacing
                }
                // 重置换行参数
                currentY += currentRowHeight + spacing
                currentRow = [subview]
                currentRowWidth = subviewSize.width
                currentRowHeight = subviewSize.height
            } else {
                currentRow.append(subview)
                currentRowWidth += subviewSize.width + spacing
                currentRowHeight = max(currentRowHeight, subviewSize.height)
            }
        }
        // 放置最后一行元素
        let rowOffset = (bounds.width - currentRowWidth + spacing) / 2
        var x = bounds.minX + rowOffset
        for item in currentRow {
            let itemSize = item.sizeThatFits(.unspecified)
            item.place(at: CGPoint(x: x, y: currentY + (currentRowHeight - itemSize.height)/2), proposal: ProposedViewSize(itemSize))
            x += itemSize.width + spacing
        }
    }
}

第二步：替换原有LazyVGrid

将你原来的LazyVGrid替换为上面定义的CenterFlowLayout即可：

var body: some View {
    ZStack {
        Color(red: 75/255, green: 0, blue: 130/255).ignoresSafeArea()
        VStack {
            // 替换原来的LazyVGrid，spacing参数和你之前的配置保持一致
            CenterFlowLayout(spacing: 10) {
                let letters = wordToArray(word: testWord)
                ForEach(Array(letters.enumerated()), id: \.offset) { letter in
                    Text(String(letter.element).capitalized)
                        .foregroundColor(.blue)
                        .frame(width:30, height: 40)
                        .background(Color.yellow)
                        .cornerRadius(5)
                }
            }
            .padding()
        }
    }
}

如果需要兼容iOS 16以下的版本，可以直接使用第三方开源的流式布局组件，逻辑和上面的实现一致。

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