ios - 在 UIStackView() 中使一个 View 比其他 View 大

Question

我有一个包含 5 个元素的 UIStackView。我想要居中的那个比其他的大(如下图所示)。

我如何创建 UIStackView()

stackView.axis  = UILayoutConstraintAxis.horizontal
stackView.distribution = UIStackViewDistribution.fillEqually
stackView.alignment = UIStackViewAlignment.bottom
stackView.spacing = 0.0
stackView.addArrangedSubview(supportedServicesView)
stackView.addArrangedSubview(incidentView)
stackView.addArrangedSubview(contactUsView)
stackView.addArrangedSubview(moreView)
stackView.addArrangedSubview(moreView2)
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)

stackView.anchor(nil, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 90, rightConstant: 0, widthConstant: 0, heightConstant: 0)

我如何创建自定义 UIViews subview 位置；

override func updateConstraints() {
   logoImage.anchor(self.topAnchor, left: self.leftAnchor, bottom: nil, right: self.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
   label.anchor(self.logoImage.bottomAnchor, left: self.leftAnchor, bottom: nil, right: self.rightAnchor, topConstant: 10, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)
super.updateConstraints()

}

编辑: 当我将宽度 anchor 添加到居中 View 时，它的宽度变高了，但因为高度相同，它看起来并没有变大。

contactUsView.widthAnchor.constraint(equalToConstant: self.view.frame.width / 5).isActive = true

编辑 2:当我为 UIStackView 内的任何 View 提供高度约束时，Stackviews 位置(仅限高度)更改为我为 Views 高度 anchor 提供的值。

Answer 1

我刚刚在 Playground 上实现了这个例子。

UIStackView 使用内在内容大小来计算如何将其排列的 subview 放置在堆栈 View 中，同时考虑轴、分布、间距等。

因此，如果您同时添加高度和宽度约束，您应该会看到它起作用了。请参阅下面的输出示例和屏幕截图。

//: Playground - noun: a place where people can play
import UIKit
import PlaygroundSupport


let stackview = UIStackView(frame: CGRect(x: 0, y: 0, width: 500, height: 150))
stackview.backgroundColor = .white
let colours: [UIColor] = [
    .blue,
    .green,
    .red,
    .yellow,
    .orange
]

for i in 0...4 {

    let view = UIView(frame: CGRect.zero)
    view.backgroundColor = colours[i]
    view.translatesAutoresizingMaskIntoConstraints = false

    if i == 2 {
        view.heightAnchor.constraint(equalToConstant: 130).isActive = true
    } else {
        view.heightAnchor.constraint(equalToConstant: 80).isActive = true
    }
    view.widthAnchor.constraint(equalToConstant: 75)

    stackview.addArrangedSubview(view)
}

stackview.axis  = .horizontal
stackview.distribution = .fillEqually
stackview.alignment = .bottom
stackview.spacing = 0.5

PlaygroundPage.current.liveView = stackview

您可以将此代码直接放到 playground 中，并调整间距、分布等设置以获得所需的输出。