多层嵌套UIStackView的AutoLayout失效，子视图Frame为0求助

问题根源 #

你的代码存在几个破坏自动布局逻辑的问题：

• 错误地给StackView的arranged子视图添加leading/trailing约束，StackView本身会自动管理子视图的排列位置，手动添加这些约束会导致布局冲突，子视图被压缩至尺寸为0。
• UIScrollView内部的垂直StackView缺少宽度约束，导致ScrollView无法确定内容宽度，进而干扰内部视图的尺寸计算。
• 大量添加无尺寸约束的空UIView，这类视图会被自动压缩为0，打乱整体布局结构。
• Label的widthAnchor约束与水平StackView的布局逻辑冲突，导致子视图无法正确分配空间。

修正方案 #

1. 规范UIScrollView与内部StackView的约束：使用ScrollView的contentLayoutGuide和frameLayoutGuide来绑定垂直StackView，确保内容宽度与屏幕一致，同时明确滚动方向。
2. 移除冲突约束：删除所有给arranged子视图添加的leading/trailing约束，交给StackView自动管理布局。
3. 清理冗余视图：删除不必要的空UIView，避免干扰布局。
4. 配置StackView属性：通过设置spacing、distribution、alignment等属性，让StackView自动分配子视图空间。
5. 调整Label约束：移除不必要的widthAnchor，由父StackView的布局属性控制宽度。

修正后的代码 #

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let scroll = UIScrollView()
        scroll.backgroundColor = .blue
        view.addSubview(scroll)
        scroll.translatesAutoresizingMaskIntoConstraints = false
        
        // 约束ScrollView到父视图四边
        NSLayoutConstraint.activate([
            scroll.topAnchor.constraint(equalTo: view.topAnchor),
            scroll.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            scroll.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scroll.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
        
        let stackV = UIStackView()
        stackV.axis = .vertical
        stackV.backgroundColor = .red
        stackV.spacing = 8 // 添加垂直间距优化布局
        stackV.translatesAutoresizingMaskIntoConstraints = false
        scroll.addSubview(stackV)
        
        // 关键约束：让垂直StackView宽度与ScrollView可视区域一致，确保内容宽度固定
        NSLayoutConstraint.activate([
            stackV.topAnchor.constraint(equalTo: scroll.contentLayoutGuide.topAnchor),
            stackV.bottomAnchor.constraint(equalTo: scroll.contentLayoutGuide.bottomAnchor),
            stackV.leadingAnchor.constraint(equalTo: scroll.contentLayoutGuide.leadingAnchor),
            stackV.trailingAnchor.constraint(equalTo: scroll.contentLayoutGuide.trailingAnchor),
            stackV.widthAnchor.constraint(equalTo: scroll.frameLayoutGuide.widthAnchor)
        ])

        var stackH: UIStackView
        for j in 0...3 {
            stackH = UIStackView()
            stackH.axis = .horizontal
            stackH.backgroundColor = .green
            stackH.spacing = 8 // 添加水平间距
            stackH.distribution = .fillEqually // 子视图平分水平空间
            stackH.translatesAutoresizingMaskIntoConstraints = false
            
            stackV.addArrangedSubview(stackH)
            
            var label: UILabel
            var stackCol: UIStackView
            for i in 0...3 {
                stackCol = UIStackView()
                stackCol.axis = .vertical
                stackCol.backgroundColor = .cyan
                stackCol.spacing = 4
                stackCol.alignment = .center // 让Label居中显示
                stackCol.translatesAutoresizingMaskIntoConstraints = false
                stackH.addArrangedSubview(stackCol)
                
                label = UILabel()
                label.translatesAutoresizingMaskIntoConstraints = false
                label.text = "teste"
                label.backgroundColor = .orange
                label.heightAnchor.constraint(equalToConstant: 30).isActive = true
                // 移除width约束，由父StackView的fillEqually分配宽度
                
                stackCol.addArrangedSubview(label)
            }
        }
    }
}

关键修正点说明 #

• 采用scroll.contentLayoutGuide和scroll.frameLayoutGuide是UIScrollView布局的标准方式，能确保内容视图的尺寸计算正确。
• 通过StackView的distribution、alignment属性替代手动约束，让布局逻辑更清晰，避免冲突。
• 移除冗余视图和约束后，所有子视图能根据StackView的规则正确分配空间，不会再出现Frame为0的情况。

内容的提问来源于stack exchange，提问作者Matheus Cavalcante Teixeira