Swift中如何创建3列无限行的等尺寸按钮网格

问题背景 #

需要创建一个3列布局的方形按钮网格，Y轴方向支持无限延伸。当前采用垂直UIStackView嵌套水平UIStackView的方案，仅在按钮数量为3的倍数时显示正常；若最后一行按钮不足3个，按钮会被拉伸填充整行宽度，无法保持统一的方形尺寸。目标是无论按钮数量多少，所有按钮都保持等宽等高的方形，且按3列的间距均匀排列。

当前问题表现 #

最后一行按钮数量不足3个时，按钮会拉伸至填充整行宽度，导致尺寸与其他行不一致。

预期效果 #

所有按钮保持统一方形尺寸，最后一行不足3个按钮时，按钮仍按3列布局的间距均匀分布，不会被拉伸。

解决方案 #

核心思路是让每一行的水平UIStackView始终包含3个元素（按钮或占位视图），确保fillEqually分布规则能稳定生效，同时通过约束保证按钮为方形：

• 给垂直UIStackView添加可靠的宽度约束，避免依赖frame值。
• 计算总行数时向上取整，确保所有按钮都能被容纳。
• 每一行强制填充3个元素，不足的位置用隐藏的占位视图补充。
• 给按钮添加宽高相等的约束，保证方形比例，宽度由水平栈自动分配。

修改后的代码示例 #

let stackview = UIStackView()
contentView.addSubview(stackview)
stackview.axis = .vertical
stackview.alignment = .fill
stackview.distribution = .fill
stackview.spacing = 10
stackview.translatesAutoresizingMaskIntoConstraints = false

// 绑定垂直栈与contentView的约束，固定宽度
NSLayoutConstraint.activate([
    stackview.topAnchor.constraint(equalTo: contentView.topAnchor),
    stackview.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
    stackview.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
    stackview.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
])

var count = 0
let totalButtons = buttons.count
// 向上取整计算总行数
let totalRows = (totalButtons + 2) / 3

for _ in 0..<totalRows {
    let hstack = UIStackView()
    hstack.axis = .horizontal
    hstack.alignment = .center
    hstack.distribution = .fillEqually
    hstack.spacing = 16
    hstack.translatesAutoresizingMaskIntoConstraints = false
    
    // 水平栈宽度与垂直栈保持一致
    hstack.widthAnchor.constraint(equalTo: stackview.widthAnchor).isActive = true
    
    // 每行添加3个元素，不足用占位视图填充
    for _ in 0..<3 {
        if count < totalButtons {
            let button = FoodButtonComponent()
            button.translatesAutoresizingMaskIntoConstraints = false
            hstack.addArrangedSubview(button)
            
            // 约束按钮为方形
            button.widthAnchor.constraint(equalTo: button.heightAnchor).isActive = true
            
            button.setup(with: buttons[count])
            count += 1
        } else {
            // 添加隐藏的占位视图，维持布局结构
            let placeholder = UIView()
            placeholder.isHidden = true
            hstack.addArrangedSubview(placeholder)
        }
    }
    
    stackview.addArrangedSubview(hstack)
}

关键修改说明 #

1. 约束可靠性：给垂直栈添加了与contentView绑定的约束，替代原代码中依赖frame.size.width的不可靠方式，确保布局在视图生命周期内稳定。
2. 占位视图填充：通过隐藏的占位视图让每行始终保持3个元素，保证水平栈的fillEqually能均匀分配宽度，避免不足3个时按钮被拉伸。
3. 方形按钮约束：用widthAnchor.equalTo(button.heightAnchor)替代固定宽高的常量约束，让按钮自适应布局同时保持方形比例。

内容的提问来源于stack exchange，提问作者José Luna