StackView不以编程方式向左对齐

Question

我以编程方式制作的StackView看起来像这样：

两个子视图：

三个子视图：

四个子视图：

这是我的代码：

    cameraButton.setImage(UIImage(named: "blueCamera"), for: .normal)
    cameraButton.addTarget(self, action: #selector(cameraTapped), for: .touchUpInside)
    cameraButton.widthAnchor.constraint(equalToConstant: 70.0).isActive = true
    calenderButton.setImage(UIImage(named: "calender"), for: .normal)
    calenderButton.addTarget(self, action: #selector(calanderTapped), for: .touchUpInside)
    calenderButton.widthAnchor.constraint(equalToConstant: 70.0).isActive = true

    stackView.frame = CGRect(x: 0, y: 0, width: scrollView.frame.size.width, height: scrollViewHeight)
    stackView.axis = .horizontal
    stackView.spacing = 5
    stackView.semanticContentAttribute = .forceLeftToRight
    stackView.alignment = .fill // .leading .firstBaseline .center .trailing .lastBaseline
    stackView.distribution = .equalSpacing // .fillEqually .fillProportionally .equalSpacing .equalCentering
    stackView.addArrangedSubview(calenderButton)
    stackView.addArrangedSubview(cameraButton)
    stackView.backgroundColor = UIColor(red: 0.161, green: 0.165, blue: 0.188, alpha: 1.00)
    scrollView.addSubview(stackView)

出了什么问题： StackView没有将子视图向左对齐。

我要实现的目标：

我希望所有子视图都向左对齐，我尝试使用stackView.semanticContentAttribute = .forceLeftToRight来做到这一点，但这似乎并没有取得太大的成就。

Answer 1

设置：

 stackView.alignment = .leading 

并对此进行评论：

//stackView.distribution = .equalSpacing

您的代码将如下所示：

cameraButton.setImage(UIImage(named: "blueCamera"), for: .normal)
cameraButton.addTarget(self, action: #selector(cameraTapped), for: .touchUpInside)
cameraButton.widthAnchor.constraint(equalToConstant: 70.0).isActive = true
calenderButton.setImage(UIImage(named: "calender"), for: .normal)
calenderButton.addTarget(self, action: #selector(calanderTapped), for: .touchUpInside)
calenderButton.widthAnchor.constraint(equalToConstant: 70.0).isActive = true

stackView.frame = CGRect(x: 0, y: 0, width: scrollView.frame.size.width, height: scrollViewHeight)
stackView.axis = .horizontal
stackView.spacing = 5
stackView.alignment = .leadingZ     
stackView.addArrangedSubview(calenderButton)
stackView.addArrangedSubview(cameraButton)
stackView.backgroundColor = UIColor(red: 0.161, green: 0.165, blue: 0.188, alpha: 1.00)
scrollView.addSubview(stackView)

Answer 2

您可以通过使用具有动态宽度的透明UIView来实现。因此，除此UIView外，每个图像视图都将具有宽度限制。还要将stackView.alignment和stackView..distribution属性设置为.fill。

使用此功能，您可以显示/隐藏具有一致的左对齐的imageViews。

这是使用情节提要的快速设置。如您所见，除最后UIView个名称“蓝色动态宽度视图”外，所有图像的宽度均设置为60。

Answer 3

夫妇选项...

1）限制堆栈视图的前导和底端，但不限制尾随；约束第一个子视图的宽度和高度；将其他子视图的宽度和高度限制为与第一个子视图相等；给堆栈视图所需的间距。

2）约束堆栈视图前导，尾随和底端；约束第一个子视图的宽度和高度；将其他子视图的宽度和高度限制为与第一个子视图相等；给堆栈分配：等间距；添加额外的清晰子视图，以增加总共4个子视图。

3）与2具有相同的约束，但是添加4个清晰的子视图，然后将按钮添加为这些子视图的子视图。