iOS：如何在UIView中动态排列4-5个按钮（每行2个）

嘿，这个需求我太熟了！用嵌套StackView完全能完美解决，而且完全不用扛CollectionView的开销，代码写起来也清爽得很。我给你捋个最优实现方案，直接就能用：

核心思路 #

用一个垂直StackView作为最外层容器，然后根据按钮数量，在里面嵌套水平StackView作为每行的容器：

• 如果是4个按钮：拆成2个水平StackView，每个放2个按钮
• 如果是5个按钮：拆成3个水平StackView，前两个各放2个，最后一个放1个
  所有布局逻辑靠StackView的属性自动处理，不用手动算frame或者约束。

完整代码实现（Swift） #

下面是直接可复用的代码，我加了详细注释：

import UIKit

class ButtonLayoutViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // 1. 创建外层垂直StackView
        let verticalStackView = UIStackView()
        verticalStackView.axis = .vertical
        verticalStackView.alignment = .fill // 每行水平StackView占满宽度
        verticalStackView.spacing = 16 // 行与行之间的间距，可按需调整
        verticalStackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(verticalStackView)
        
        // 给垂直StackView设置约束（示例：居中显示，左右留边）
        NSLayoutConstraint.activate([
            verticalStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            verticalStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            verticalStackView.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 16),
            verticalStackView.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -16)
        ])
        
        // 2. 模拟从服务获取的按钮标题数组（4或5个元素）
        let buttonTitles = ["按钮A", "按钮B", "按钮C", "按钮D", "按钮E"] // 换成你的服务数据
        
        // 3. 把标题数组按每2个一组拆分
        var groupedTitles: [[String]] = []
        for index in stride(from: 0, to: buttonTitles.count, by: 2) {
            let endIndex = min(index + 2, buttonTitles.count)
            groupedTitles.append(Array(buttonTitles[index..<endIndex]))
        }
        
        // 4. 遍历每组，创建水平StackView和按钮
        for titles in groupedTitles {
            let horizontalStackView = UIStackView()
            horizontalStackView.axis = .horizontal
            horizontalStackView.alignment = .center
            horizontalStackView.spacing = 16 // 同组内按钮的间距
            horizontalStackView.distribution = .fillEqually // 按钮平分每行宽度，可选
            
            // 为每个标题创建按钮
            for title in titles {
                let button = createStyledButton(with: title)
                horizontalStackView.addArrangedSubview(button)
            }
            
            // 可选：处理最后一行只有1个按钮的情况（让它居中显示）
            if titles.count == 1 {
                let placeholderView = UIView()
                // 让占位视图宽度和按钮一致，实现按钮居中
                placeholderView.widthAnchor.constraint(equalTo: horizontalStackView.arrangedSubviews[0].widthAnchor).isActive = true
                horizontalStackView.addArrangedSubview(placeholderView)
            }
            
            verticalStackView.addArrangedSubview(horizontalStackView)
        }
    }
    
    // 封装按钮样式，方便复用
    private func createStyledButton(with title: String) -> UIButton {
        let button = UIButton(type: .system)
        button.setTitle(title, for: .normal)
        button.titleLabel?.font = UIFont.systemFont(ofSize: 16, weight: .medium)
        button.backgroundColor = .systemBlue
        button.setTitleColor(.white, for: .normal)
        button.layer.cornerRadius = 8
        button.clipsToBounds = true
        // 设置固定高度，避免按钮被拉伸变形
        button.heightAnchor.constraint(equalToConstant: 44).isActive = true
        // 添加点击事件
        button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        return button
    }
    
    // 按钮点击回调
    @objc private func buttonTapped(_ sender: UIButton) {
        guard let title = sender.title(for: .normal) else { return }
        print("点击了按钮：\(title)")
    }
}

可选优化细节 #

• 如果不想让按钮平分宽度，可以把水平StackView的distribution改成.fill，然后给按钮设置固定宽度约束
• 要是想让最后一行的单个按钮占满整行，直接去掉占位视图的代码，把水平StackView的distribution设为.fill即可
• 按钮样式可以根据你的UI需求随便改，比如圆角、背景色、字体大小这些

这个方案完全满足你的需求，代码轻量，没有CollectionView的额外开销，而且能动态适配4或5个按钮的布局，非常灵活。

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