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

Posted 2023-02-27

【中文标题】嵌套堆栈视图：以编程方式附加子堆栈视图时，子堆栈视图不在其父堆栈视图内

【英文标题】：Nested Stack Views: Child Stack View is not inside its parent stack view when attaching it programmatically

【发布时间】：2016-06-13 05:02:40

【问题描述】：

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

@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 还是很陌生。任何人都可以帮助指出我在这里缺少什么？

谢谢！

【参考方案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。

【参考方案2】：

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

会解决的