UIScrollView 内的嵌套 UIStackViews：未填充容器的宽度？

Question

我正在尝试使用 UIScrollView 中嵌套的 UIStackView 以编程方式创建 UIButton 的 3x33 网格。外层UIStackView有纵轴，内层UIStackView有横轴，distribution = .fillEqually.

如果我没有封闭的 UIScrollView，按钮会正确填充屏幕的宽度。 然而，使用 滚动视图时，按钮仅占屏幕宽度的一半。

这是一个代码示例。在 IB 中，ViewController 的 view 属性已设置为 UIScrollView 实例。

class ViewController: UIViewController {
  var stackView: UIStackView!

  override func viewDidLoad() {
    super.viewDidLoad()

    title = "No Filling :("

    stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .vertical
    stackView.spacing = 5
    view.addSubview(stackView)

    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[stackView]-|", options: .alignAllCenterX, metrics: nil, views: ["stackView": stackView!]))
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[stackView]|", options: .alignAllCenterY, metrics: nil, views: ["stackView": stackView!]))

    for _ in 1...33 {
      let hView = UIStackView()
      hView.translatesAutoresizingMaskIntoConstraints = false
      hView.axis = .horizontal
      hView.distribution = .fillEqually
      hView.spacing = 5

      stackView.addArrangedSubview(hView)
      stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[hView]|", options: .alignAllCenterX, metrics: nil, views: ["hView": hView]))

      for i in 1...3 {
        let button = UIButton(type: .system)
        button.setTitle("Button \(i)", for: .normal)
        hView.addArrangedSubview(button)

        button.layer.borderWidth = 1
        button.layer.cornerRadius = 7
      }
    }
  }

}

Answer 1

您希望 scrollView 的内容宽度为 scrollView 本身的宽度，以便它填满屏幕并垂直滚动。

为此，您需要确定滚动视图内容的宽度。现在，它的宽度来自三个按钮的固有大小。

您需要添加一个约束，明确使 scrollView 的内容（stackView + 左右偏移量）等于 scrollView 的宽度：

view.addConstraints(NSLayoutConstraint.constraints(
    withVisualFormat: "H:|-20-[stackView]-20-|", options: .alignAllCenterX,
    metrics: nil, views: ["stackView": stackView!]))

view.addConstraints(NSLayoutConstraint.constraints(
    withVisualFormat: "V:|[stackView]|", options: .alignAllCenterY,
    metrics: nil, views: ["stackView": stackView!]))

stackView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -40).isActive = true

注：调整constant-40是左右偏移之和（各20）。为了使 scrollView 不水平滚动：stackView.width + 20 + 20 == scrollView.width，或等效地，stackView.width == scrollView.width - 40，这是约束指定的内容。

UIScrollView 内的嵌套 UIStackViews：未填充容器的宽度？

Nested UIStackViews inside a UIScrollView: Not filling width of container?

uiscrollview

uikit

ios

swift

uistackview