嵌套堆栈视图：以编程方式附加时，子堆栈视图不在其父堆栈视图内

Question

我正在尝试实现嵌套堆栈视图，其中一个堆栈视图位于另一个堆栈视图内。我基于我的代码。我当前的代码在下面。

@IBOutlet weak var verticalStackView: UIStackView!
let blueImageView = UIImageView()
blueImageView.backgroundColor = UIColor.blueColor()
blueImageView.image = UIImage(named: "just some image")
blueImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let greenImageView = UIImageView()
greenImageView.backgroundColor = UIColor.greenColor()
greenImageView.image = UIImage(named: "just some image")
// This is just from SnapKit
greenImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let stackView = UIStackView()
stackView.axis = UILayoutConstraintAxis.Horizontal
stackView.distribution = UIStackViewDistribution.EqualSpacing
stackView.alignment = UIStackViewAlignment.Center
stackView.spacing = 16.0
stackView.addArrangedSubview(blueImageView)
stackView.addArrangedSubview(greenImageView)
stackView.translatesAutoresizingMaskIntoConstraints = false;
// This is just from SnapKit
verticalStackView.snp_makeConstraints { (make) in
  make.height.equalTo(70)
}
verticalStackView.addSubview(stackView)

当我尝试运行时，它看起来是这样的。

如您所见，子堆栈视图 stackView 在层次结构中位于父堆栈视图 (verticalStackView) 下方。但是定位不对。

我对 Swift、AutoLayout 和 StackViews 很陌生。任何人都可以帮助指出我在这里缺少什么吗？

谢谢！

Answer 1

所以我在阅读之后找到了解决方案..

@IBOutlet weak var verticalStackView: UIStackView!
let blueImageView = UIImageView()
blueImageView.backgroundColor = UIColor.blueColor()
blueImageView.image = UIImage(named: "buttonFollowCheckGreen")
blueImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let greenImageView = UIImageView()
greenImageView.backgroundColor = UIColor.greenColor()
greenImageView.image = UIImage(named: "buttonFollowCheckGreen")
greenImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let firstLineStackView = UIStackView()
firstLineStackView.axis = UILayoutConstraintAxis.Horizontal
firstLineStackView.distribution = UIStackViewDistribution.Fill
firstLineStackView.alignment = UIStackViewAlignment.Center
firstLineStackView.spacing = 8.0

firstLineStackView.addArrangedSubview(blueImageView)
firstLineStackView.addArrangedSubview(greenImageView)
firstLineStackView.translatesAutoresizingMaskIntoConstraints = false;

let redImageView = UIImageView()
redImageView.backgroundColor = UIColor.redColor()
redImageView.image = UIImage(named: "buttonFollowCheckGreen")
redImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

verticalStackView.addArrangedSubview(firstLineStackView)

我只需要使用 addArrangedSubview 而不是 addSubview，让自动布局完成剩下的工作。为了修复图像视图的位置和大小，我还将 verticalStackView 的 alignment 从 fill 修改为 leading。

Answer 2

greenImageView.heightAnchor.constraint(equalToConstant: 34).isActive = true greenImageView.widthAnchor.constraint(equalToConstant: 34).isActive = true

会解决的

嵌套堆栈视图：以编程方式附加时，子堆栈视图不在其父堆栈视图内

Nested Stack Views: Child Stack View is not inside its parent stack view when attaching it programmatically

autolayout

swift

uistackview