UIStackView设置.fillEqually布局时忽略间距的问题排查

我在TableView Cell里遇到布局问题：通过代码给Storyboard创建的父UIStackView添加图片，根据图片数量切换布局。当图片数为4时，嵌套的子UIStackView设置了.fillEqually和spacing，但spacing被忽略，图片高度也不等。但手动在Storyboard里做相同设置却能正常生效，请问问题出在哪？

extension UIStackView {
func addImages(fileNames: [String]) {
    subviews.forEach({ $0.removeFromSuperview() })

    let images = getImagesFromFiles(fileNames: fileNames)
    let gap: CGFloat = 8
    guard !images.isEmpty else { return }
    
    axis = images.count >= 5 ? .vertical : .horizontal
    spacing = gap
    distribution = .fillProportionally
    
    func insertImagesInStack(_ stack: UIStackView, _ images: [UIImage]) {
        for image in images {
            let imageView = UIImageView(image: image)
            imageView.contentMode = .scaleAspectFill
            imageView.clipsToBounds = true
            stack.insertArrangedSubview(imageView, at: stack.subviews.count)
        }
    }

    let topImageView = UIImageView(image: images.first)
    topImageView.clipsToBounds = true
    topImageView.contentMode = .scaleAspectFill

    insertArrangedSubview(topImageView, at: 0)
    
    switch images.count {
    case 4:
        let secondStack = UIStackView()
        secondStack.axis = .vertical
        secondStack.distribution = .fillEqually
        secondStack.spacing = gap
        
        secondStack.addConstraint(NSLayoutConstraint(item: secondStack, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 120))
        
        secondStack.backgroundColor = .blue
        insertImagesInStack(secondStack, Array(images.dropFirst()))
        insertArrangedSubview(secondStack, at: 1)
        layoutIfNeeded()
    default:
        break
    }
}
}

问题根源与解决办法 #

1. 父StackView的distribution冲突
   父StackView设置的.fillProportionally会优先按子视图的固有尺寸分配空间，直接干扰了子StackView的.fillEqually布局逻辑，导致子StackView内部无法均等分配图片高度，spacing也被挤压失效。

2. 子StackView缺少高度约束关联
   Storyboard中手动布局时，Cell的自动高度机制会给父StackView明确的高度参考，但代码里只给了子StackView固定宽度，没让它的高度和父StackView绑定，子StackView的高度无法被正确计算，内部图片的均等布局自然失效。

修正后的代码调整 #

extension UIStackView {
func addImages(fileNames: [String]) {
    subviews.forEach({ $0.removeFromSuperview() })

    let images = getImagesFromFiles(fileNames: fileNames)
    let gap: CGFloat = 8
    guard !images.isEmpty else { return }
    
    // 4张图时父StackView改用.fill，避免干扰子StackView布局
    axis = images.count >= 5 ? .vertical : .horizontal
    spacing = gap
    distribution = images.count == 4 ? .fill : .fillProportionally
    
    func insertImagesInStack(_ stack: UIStackView, _ images: [UIImage]) {
        for image in images {
            let imageView = UIImageView(image: image)
            imageView.contentMode = .scaleAspectFill
            imageView.clipsToBounds = true
            // 给图片添加强约束，确保子StackView能均等分配高度
            imageView.heightAnchor.constraint(greaterThanOrEqualToConstant: 0).isActive = true
            stack.insertArrangedSubview(imageView, at: stack.subviews.count)
        }
    }

    let topImageView = UIImageView(image: images.first)
    topImageView.clipsToBounds = true
    topImageView.contentMode = .scaleAspectFill
    // 让主图高度和父StackView一致，保证布局对齐
    topImageView.heightAnchor.constraint(equalTo: self.heightAnchor).isActive = true

    insertArrangedSubview(topImageView, at: 0)
    
    switch images.count {
    case 4:
        let secondStack = UIStackView()
        secondStack.axis = .vertical
        secondStack.distribution = .fillEqually
        secondStack.spacing = gap
        
        secondStack.widthAnchor.constraint(equalToConstant: 120).isActive = true
        // 绑定子StackView高度到父视图，明确高度参考
        secondStack.heightAnchor.constraint(equalTo: self.heightAnchor).isActive = true
        
        secondStack.backgroundColor = .blue
        insertImagesInStack(secondStack, Array(images.dropFirst()))
        insertArrangedSubview(secondStack, at: 1)
    default:
        break
    }
}
}

额外注意点 #

• 确保TableView的rowHeight设为UITableView.automaticDimension，同时设置estimatedRowHeight，让Cell能自动计算高度。
• 代码中无需手动调用layoutIfNeeded()，Auto Layout会自动处理布局更新时机。

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