为何UIStackView未将UILabel作为排列子视图进行堆叠？

嘿，看你的需求是要让两个UIView垂直堆叠，同时UILabel对齐到它们的前缘对吧？你现在用单一水平StackView的方式没法实现这个效果，得用嵌套StackView来搞定，给你调整后的方案：

要同时满足「两个UIView垂直堆叠」和「UILabel对齐到子视图前缘」的要求，核心是通过嵌套StackView来拆分布局逻辑：用一个垂直StackView管理两个UIView的堆叠，再把这个垂直StackView和UILabel放到外层的水平StackView中。

完整代码示例 #

// 外层水平StackView：负责组合垂直堆叠视图和标签
let outerStack = UIStackView()
outerStack.axis = .horizontal
outerStack.alignment = .leading // 关键：让子视图对齐到前缘（左侧）
outerStack.spacing = 7
view.addSubview(outerStack)
outerStack.translatesAutoresizingMaskIntoConstraints = false

// 内层垂直StackView：专门用来堆叠两个UIView
let verticalStack = UIStackView()
verticalStack.axis = .vertical
verticalStack.distribution = .fillProportionally // 保留你原本的分布规则
verticalStack.spacing = 7 // 可根据需求调整两个UIView的间距

// 创建第一个UIView并添加到垂直StackView
let view1 = UIView()
view1.backgroundColor = .red
view1.widthAnchor.constraint(equalToConstant: 80).isActive = true
view1.heightAnchor.constraint(equalToConstant: 80).isActive = true
verticalStack.addArrangedSubview(view1)

// 创建第二个UIView并添加到垂直StackView
let view2 = UIView()
view2.backgroundColor = .blue
view2.widthAnchor.constraint(equalToConstant: 80).isActive = true
view2.heightAnchor.constraint(equalToConstant: 80).isActive = true
verticalStack.addArrangedSubview(view2)

// 创建UILabel并添加到外层StackView
let label = UILabel()
label.text = "对齐前缘的标签"
label.backgroundColor = .yellow
outerStack.addArrangedSubview(verticalStack)
outerStack.addArrangedSubview(label)

// 给外层StackView添加约束（补全你没写完的部分）
NSLayoutConstraint.activate([
    outerStack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    outerStack.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

关键调整点说明 #

• 嵌套结构拆分：把两个UIView的垂直堆叠和与UILabel的水平布局拆分成两个层级，避免单一StackView的布局冲突。
• 外层StackView的alignment设置：将alignment设为.leading，确保UILabel对齐到垂直StackView的左侧前缘；如果你的「前缘」指的是垂直方向的顶部，只需把这个属性改成.top即可。
• 保留了你原本的.fillProportionally分布方式，确保两个UIView按比例分配垂直空间（如果不需要比例分配，也可以换成.fill或.equalSpacing等）。

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