iOS可变宽度UIStackView嵌套UIScrollView子视图宽度异常问题

实现带缩放功能的UIScrollView布局时，采用垂直UIStackView作为scrollViewContainer承载子视图，原有实现代码如下：

import UIKit

class DocumentViewController: UIViewController, UIScrollViewDelegate {
    
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return scrollViewContainer
    }
    
    func scrollViewDidZoom(_ scrollView: UIScrollView) {
        let scrollViewSize = scrollView.bounds.size
        let scrollViewContainerSize = scrollViewContainer.frame.size
        let verticalPadding = scrollViewContainerSize.height < scrollViewSize.height ? (scrollViewSize.height - scrollViewContainerSize.height) / 2 : 0
        let horizontalPadding = scrollViewContainerSize.width < scrollViewSize.width ? (scrollViewSize.width - scrollViewContainerSize.width) / 2 : 0
        scrollView.contentInset = UIEdgeInsets(top: verticalPadding, left: horizontalPadding, bottom: verticalPadding, right: horizontalPadding)
    }
  
    let scrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.minimumZoomScale = 0.1
        scrollView.maximumZoomScale = 4.0
        scrollView.zoomScale = 1.0
        return scrollView
    }()
  
    let scrollViewContainer: UIStackView = {
        let view = UIStackView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.axis = .vertical
        view.spacing = 15
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self
        view.backgroundColor = .gray
        view.addSubview(scrollView)
        scrollView.addSubview(scrollViewContainer)
        
        let uiview1 = UIView(frame: .zero)
        uiview1.heightAnchor.constraint(equalToConstant: 1000).isActive = true
        uiview1.widthAnchor.constraint(equalToConstant: 1000).isActive = true
        scrollViewContainer.addArrangedSubview(uiview1)
        uiview1.backgroundColor = .white
        
        let uiview2 = UIView(frame: .zero)
        uiview2.heightAnchor.constraint(equalToConstant: 1000).isActive = true
        uiview2.widthAnchor.constraint(equalToConstant: 1000).isActive = true
        scrollViewContainer.addArrangedSubview(uiview2)
        uiview2.backgroundColor = .white
        
        let uiview3 = UIView(frame: .zero)
        uiview3.heightAnchor.constraint(equalToConstant: 1000).isActive = true
        uiview3.widthAnchor.constraint(equalToConstant: 1000).isActive = true
        scrollViewContainer.addArrangedSubview(uiview3)
        uiview3.backgroundColor = .white
        
        let uiview4 = UIView(frame: .zero)
        uiview4.heightAnchor.constraint(equalToConstant: 1000).isActive = true
        uiview4.widthAnchor.constraint(equalToConstant: 1000).isActive = true
        scrollViewContainer.addArrangedSubview(uiview4)
        uiview4.backgroundColor = .white
        
        let uiview5 = UIView(frame: .zero)
        uiview5.heightAnchor.constraint(equalToConstant: 1000).isActive = true
        uiview5.widthAnchor.constraint(equalToConstant: 2000).isActive = true
        scrollViewContainer.addArrangedSubview(uiview5)
        uiview5.backgroundColor = .white
        
        showBounds()
        setConstraints()
    }
    
    func setConstraints() {
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        scrollViewContainer.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        scrollViewContainer.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
        scrollViewContainer.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        scrollViewContainer.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
        
    }
        
    func showBounds() {
        view.layer.borderWidth = 5.0
        view.layer.borderColor = UIColor.blue.cgColor
        scrollViewContainer.layer.borderWidth = 5.0
        scrollViewContainer.layer.borderColor = UIColor.red.cgColor
        scrollView.layer.borderWidth = 3.0
        scrollView.layer.borderColor = UIColor.yellow.cgColor
    }

}

运行代码后布局不符合预期：

• 最后一个测试UIView宽度设置为2000时，实际显示被裁剪，可视宽度仅为1000
• 若将最后一个测试UIView宽度修改为500，会出现异常布局效果
  排查确认scrollViewContainer宽度会自动适配为所有子视图中的最小宽度，和需求不符。

两个约束配置错误导致布局异常：

1. 直接将scrollViewContainer的左右边绑定到UIScrollView本身的左右边，相当于强制把StackView的宽度锁死为ScrollView的可视区域宽度，垂直StackView无法根据子视图宽度自适应撑开。
2. 垂直UIStackView默认的alignment属性为.fill，会强制所有排列的子视图拉伸到和StackView自身宽度一致，无法保留子视图原本设置的差异化宽度。

修改两处配置即可实现需求：

1. 调整scrollViewContainer的初始化代码，将子视图对齐方式改为左对齐，保留子视图自定义宽度：

let scrollViewContainer: UIStackView = {
    let view = UIStackView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.axis = .vertical
    view.spacing = 15
    view.alignment = .leading // 新增配置，子视图左对齐，不强制拉伸宽度
    return view
}()

2. 重写约束逻辑，将ScrollView的内容布局参考（contentLayoutGuide）和容器绑定，正确计算滚动区域，同时保证容器宽度可被子视图撑开：

func setConstraints() {
    // ScrollView贴父视图的约束保持不变
    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    
    // 容器绑定ScrollView的contentLayoutGuide，用于自动计算contentSize
    scrollViewContainer.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor).isActive = true
    scrollViewContainer.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor).isActive = true
    scrollViewContainer.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor).isActive = true
    scrollViewContainer.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor).isActive = true
    
    // 保证容器最小宽度不小于ScrollView可视宽度，缩放时居中逻辑正常生效
    scrollViewContainer.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true
}

修改完成后，scrollViewContainer会自动取所有子视图的最大宽度作为自身宽度，不同宽度的子视图不会被裁剪或拉伸，ScrollView可正常横向、纵向滚动，原有缩放居中逻辑也能正常运行。

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