SwiftUI中实现可变宽度按钮流式布局的最佳实践

要实现固定宽度容器内、可变宽度按钮的流式排列（能同行则保持固定间距并排，否则换行），最优雅且适配性最好的方案是基于SwiftUI的Layout协议自定义流式布局，以下是具体实现和说明：

一、自定义流式布局FlowLayout #

通过遵循Layout协议，我们可以完全控制子视图的排列逻辑，完美匹配需求：

struct FlowLayout: Layout {
    // 按钮间的固定间距
    let spacing: CGFloat
    // 容器的固定宽度
    let containerWidth: CGFloat
    
    // 计算整个布局的尺寸
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        guard !subviews.isEmpty else { return .zero }
        
        var currentRowWidth: CGFloat = 0
        var totalHeight: CGFloat = 0
        var currentRowMaxHeight: CGFloat = 0
        
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            let requiredWidth = subviewSize.width + spacing
            
            // 判断当前行是否能容纳下一个按钮
            if currentRowWidth + requiredWidth <= containerWidth {
                currentRowWidth += requiredWidth
                currentRowMaxHeight = max(currentRowMaxHeight, subviewSize.height)
            } else {
                // 换行，累加当前行高度
                totalHeight += currentRowMaxHeight + spacing
                currentRowWidth = subviewSize.width + spacing
                currentRowMaxHeight = subviewSize.height
            }
        }
        // 加上最后一行的高度
        totalHeight += currentRowMaxHeight
        
        return CGSize(width: containerWidth, height: totalHeight)
    }
    
    // 放置子视图的位置
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        guard !subviews.isEmpty else { return }
        
        var currentX = bounds.minX
        var currentY = bounds.minY
        var currentRowMaxHeight: CGFloat = 0
        
        for subview in subviews {
            let subviewSize = subview.sizeThatFits(.unspecified)
            let requiredWidth = subviewSize.width + spacing
            
            // 超出容器宽度则换行
            if currentX + requiredWidth > bounds.maxX {
                currentY += currentRowMaxHeight + spacing
                currentX = bounds.minX
                currentRowMaxHeight = 0
            }
            
            // 放置当前按钮
            subview.place(at: CGPoint(x: currentX, y: currentY), proposal: ProposedViewSize(subviewSize))
            currentX += subviewSize.width + spacing
            currentRowMaxHeight = max(currentRowMaxHeight, subviewSize.height)
        }
    }
}

二、使用自定义布局实现按钮流式排列 #

直接在视图中使用FlowLayout包裹按钮即可，无需额外的尺寸计算：

struct FlowButtonDemoView: View {
    // 固定容器宽度
    let fixedContainerWidth: CGFloat = 320
    // 按钮间的固定间距
    let buttonSpacing: CGFloat = 12
    // 示例按钮标题（宽度各不相同）
    let buttonTitles = ["登录", "注册账号", "忘记密码？", "使用第三方账号登录", "帮助中心"]
    
    var body: some View {
        FlowLayout(spacing: buttonSpacing, containerWidth: fixedContainerWidth) {
            ForEach(buttonTitles, id: \.self) { title in
                Button(action: {
                    // 按钮点击逻辑
                }) {
                    Text(title)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 8)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(8)
                }
            }
        }
        .frame(width: fixedContainerWidth)
        .padding()
    }
}

三、方案优势对比 #

如果你考虑过用LazyVGrid或手动分组的方式，这里明确下自定义Layout的优势：

• 原生适配：完全融入SwiftUI布局系统，自动响应旋转、字体变化等场景，无需额外处理
• 灵活可控：可以随时调整间距、容器宽度，适配不同场景
• 性能最优：Layout协议是SwiftUI官方提供的自定义布局接口，经过系统优化，性能优于手动计算分组的方案

不推荐的方案：手动分组+HStack/VStack #

这种方式需要提前用UIKit组件计算按钮宽度，再手动分组，不仅代码繁琐，还容易出现布局不一致的问题（比如SwiftUI和UIKit的字体渲染差异），仅作对比参考，不推荐使用。

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