UIStackView设置spacing为10但间距极小问题求助

我正在复习UIKit相关知识，遇到一个问题：向UIStackView中添加自定义视图后，设置spacing为10，但实际显示的间距极小。在过往项目中同样设置spacing=10能得到预期间距，当前代码却无法实现。

ViewController代码 #

class ViewController: UIViewController {
    private lazy var vStackView: UIStackView = {
        let stack = UIStackView(arrangedSubviews: [customButtonOne, customButtonTwo])
        stack.translatesAutoresizingMaskIntoConstraints = false
        stack.axis = .vertical
        stack.distribution = .fill
        stack.spacing = 10
        return stack
    }()
        
    private lazy var customButtonOne: CustomView = {
        let button = CustomView()
        return button
    }()
    
    private lazy var customButtonTwo: CustomView = {
        let button = CustomView()
        button.buttonView.setTitle("This is button two", for: .normal)
        return button
    }()
    
    init() {
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configure()
    }
    
    func configure() {
        view.addSubview(vStackView)

        NSLayoutConstraint.activate([
            vStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            vStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        ])
    }
}

CustomView代码 #

class CustomView: UIView {
    lazy var buttonView: UIButton = {
        let button: UIButton = UIButton()
        button.translatesAutoresizingMaskIntoConstraints = false
        button.backgroundColor = .systemBlue
        button.setTitle("Hello World", for: .normal)
        button.layer.cornerRadius = 8
        //button.configuration = buttonConfig
        return button
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        translatesAutoresizingMaskIntoConstraints = false
        addSubview(buttonView)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func setupView() {
        NSLayoutConstraint.activate([
            buttonView.centerXAnchor.constraint(equalTo: centerXAnchor),
            buttonView.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }
}

效果截图 #

问题原因及解决办法 #

问题出在CustomView的约束设置上：你只给内部的buttonView添加了居中约束，但没有限制CustomView的宽高等于buttonView的宽高。这会导致CustomView的尺寸被压缩到极小（几乎为0），UIStackView的spacing是作用在CustomView之间的，所以看起来间距就特别小。

解决办法有两种：

• 方法一：给CustomView添加约束，让它完全包裹内部按钮：
  在CustomView的setupView方法里，替换原来的约束为：

  NSLayoutConstraint.activate([
      buttonView.topAnchor.constraint(equalTo: topAnchor),
      buttonView.leadingAnchor.constraint(equalTo: leadingAnchor),
      buttonView.trailingAnchor.constraint(equalTo: trailingAnchor),
      buttonView.bottomAnchor.constraint(equalTo: bottomAnchor)
  ])
  

  这样CustomView会和按钮尺寸一致，UIStackView的spacing就会作用在两个按钮之间，显示出预期的10点间距。

• 方法二：如果不需要CustomView作为容器，直接把UIButton添加到UIStackView中，也能避免容器视图尺寸异常的问题。

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