不同UIStackView子视图等高约束代码实现报错求助

嘿，这个问题我之前在做复杂StackView布局的时候也踩过坑！先帮你拆解一下问题根源，再给你可行的解决方案。

错误原因分析 #

报错信息其实已经把问题说透了：

Unable to activate constraint with anchors [...] because they have no common ancestor. Does the constraint or its anchors reference items in different view hierarchies? That's illegal.

你要约束的两个UIView，在添加约束的那一刻还没有被纳入同一个视图层级，或者你把约束加错了父视图容器。

为什么Interface Builder里没问题？因为IB在你拖曳创建约束时，会自动完成两件事：

1. 确保所有涉及的视图已经加入到正确的层级中
2. 把约束自动添加到这两个视图的最近共同父视图上（也就是你的horizontalStackView）

你的两种尝试问题点 #

• 第一种直接调用NSLayoutConstraint.activate([heightConstraint])：如果此时view1和view2还没被添加到各自的垂直StackView，或者垂直StackView还没加入horizontalStackView，它们就没有共同祖先，必然报错。
• 第二种把约束加到horizontalStackView：方向是对的，但如果视图层级还没构建完成（比如垂直StackView还没添加到horizontalStackView），同样会触发无共同祖先的错误。

正确的实现步骤 #

1. 先构建完整的视图层级 #

所有涉及的视图必须先完成addSubview/addArrangedSubview操作，确保它们处于同一个视图树中：

• 把每个子UIView添加到对应的垂直StackView
• 把所有垂直StackView添加到水平StackView
• 把水平StackView添加到它的父视图（比如控制器的view）
• 关键：所有视图都要设置translatesAutoresizingMaskIntoConstraints = false，关闭自动生成的约束，避免和自定义约束冲突。

2. 在层级构建完成后添加约束 #

这时候你可以选择两种方式创建约束：

方式一：使用锚点语法（推荐，更简洁）

锚点语法会自动找到两个视图的最近共同父视图并添加约束，无需手动指定约束容器：

// 确保所有视图都已加入层级后执行
NSLayoutConstraint.activate([
    view1.heightAnchor.constraint(equalTo: view2.heightAnchor)
])

方式二：使用旧的item语法

如果坚持用这种方式，必须把约束添加到两个视图的最近共同父视图（也就是你的horizontalStackView）：

// 确保所有视图都已加入层级后执行
let heightConstraint = NSLayoutConstraint(
    item: view1, 
    attribute: .height, 
    relatedBy: .equal, 
    toItem: view2, 
    attribute: .height, 
    multiplier: 1, 
    constant: 0
)
horizontalStackView.addConstraint(heightConstraint)

完整示例代码 #

给你一个可直接运行的示例，演示整个流程：

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white

    // 1. 创建水平StackView并添加到父视图
    let horizontalStackView = UIStackView()
    horizontalStackView.axis = .horizontal
    horizontalStackView.spacing = 16
    horizontalStackView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(horizontalStackView)

    // 2. 创建第一个垂直StackView及其子视图
    let verticalStack1 = UIStackView()
    verticalStack1.axis = .vertical
    verticalStack1.spacing = 8
    verticalStack1.translatesAutoresizingMaskIntoConstraints = false

    let redView = UIView()
    redView.backgroundColor = .red
    redView.translatesAutoresizingMaskIntoConstraints = false
    verticalStack1.addArrangedSubview(redView)

    let orangeView = UIView()
    orangeView.backgroundColor = .orange
    orangeView.translatesAutoresizingMaskIntoConstraints = false
    verticalStack1.addArrangedSubview(orangeView)

    // 3. 创建第二个垂直StackView及其子视图
    let verticalStack2 = UIStackView()
    verticalStack2.axis = .vertical
    verticalStack2.spacing = 8
    verticalStack2.translatesAutoresizingMaskIntoConstraints = false

    let blueView = UIView()
    blueView.backgroundColor = .blue
    blueView.translatesAutoresizingMaskIntoConstraints = false
    verticalStack2.addArrangedSubview(blueView)

    let purpleView = UIView()
    purpleView.backgroundColor = .purple
    purpleView.translatesAutoresizingMaskIntoConstraints = false
    verticalStack2.addArrangedSubview(purpleView)

    // 4. 将垂直StackView添加到水平StackView（完成层级构建）
    horizontalStackView.addArrangedSubview(verticalStack1)
    horizontalStackView.addArrangedSubview(verticalStack2)

    // 5. 添加所有约束（包括跨视图的等高约束）
    NSLayoutConstraint.activate([
        // 水平StackView的布局约束
        horizontalStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        horizontalStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        horizontalStackView.widthAnchor.constraint(equalToConstant: 320),
        
        // 同列视图等高约束
        redView.heightAnchor.constraint(equalTo: blueView.heightAnchor),
        orangeView.heightAnchor.constraint(equalTo: purpleView.heightAnchor)
    ])
}

核心总结 #

解决这个问题的关键就是先构建完整的视图层级，再添加跨视图的约束。锚点语法会帮你自动处理约束的父容器，是更省心的选择；如果用旧语法，一定要把约束加到两个视图的最近共同父视图上。

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