为什么UIStackView没有堆叠UILabel arrangeSubview？

Question

我有一个UIStackView，并且作为安排的子视图，我有两个UIViews和一个UILabel。 UIViews一个接一个地堆叠，而UILabel与子视图的前沿对齐。

代码：

let stack = UIStackView()
stack.axis = .horizontal
stack.distribution = .fillProportionally
stack.alignment = .center
stack.spacing = 7
view.addSubview(stack)
stack.translatesAutoresizingMaskIntoConstraints = false
stack.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
stack.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

let icon = UIView()
icon.backgroundColor = UIColor.red
stack.addArrangedSubview(icon)
icon.translatesAutoresizingMaskIntoConstraints = false
icon.heightAnchor.constraint(equalToConstant: 42).isActive = true
icon.widthAnchor.constraint(equalToConstant: 42).isActive = true

let icon2 = UIView()
icon2.backgroundColor = UIColor.red
stack.addArrangedSubview(icon2)
icon2.translatesAutoresizingMaskIntoConstraints = false
icon2.heightAnchor.constraint(equalToConstant: 42).isActive = true
icon2.widthAnchor.constraint(equalToConstant: 42).isActive = true

let label = UILabel()
label.lineBreakMode = .byWordWrapping
label.numberOfLines = 0
label.sizeToFit()
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = .yellow
label.text = "Hello World! Again"
label.textColor = .black
stack.addArrangedSubview(label)

输出：

Answer 1

为了清楚起见......

首先，不要使用.fillProportionally。无论你认为会做什么，都是错的。您已明确设置了两个＆＃34;图标＆＃34;每个42磅宽。如果堆栈视图使用.fillProportionally，它将尝试更改这些视图的宽度，并且您将获得自动布局冲突。

其次，UILabel .numberOfLines = 0 必须宽度。否则，没有办法知道在哪里打破文本...有很多文本，它将从视图的两侧延伸。

第三，label.sizeToFit()行不会在这里完成任何事情。只需将其删除即可。

如果你添加这一行：

stack.widthAnchor.constraint(equalToConstant: 200.0).isActive = true

然后堆栈视图将扩展到200磅宽......

自动布局会为第一个排列的视图提供42的宽度（因为那是你声明的那个），第二个视图也是如此。由于您已将间距设置为7，因此会计算

42 + 7 + 42 + 7

等于98。它从堆栈视图的宽度中减去它：

200 - 98 = 102

和 是它为您的标签提供的宽度。

结果：

如果您不想将宽度明确设置为200，则可以将其设置为超视图宽度的百分比，或者为其提供前导和尾随约束。

Answer 2

尝试将distribution更改为fill

stack.distribution = .fill

使用多行设置

评论后