StackView 没有填充 Scrollview

Question

我见过几个这样的问题，但没有一个答案能帮我解决这个问题。

我在屏幕底部有一个视图，其中包含一个滚动视图，其中包含一个堆栈视图，该堆栈视图将填充按钮。

我的视图是这样以编程方式构建的：

import UIKit

class BottomBar: UIView {

    typealias BindTap = ((String) -> Void)?

    private let scrollView = UIScrollView()
    private let buttonsStackView = UIStackView()

    var onTap: BindTap

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUpViews()
        setUpLayout()
    }

    private func setUpViews() {
        backgroundColor = .cyan

        scrollView.backgroundColor = .red

        buttonsStackView.backgroundColor = .green

        buttonsStackView.alignment = .fill
        buttonsStackView.distribution = .equalSpacing
        buttonsStackView.axis = .horizontal
        buttonsStackView.spacing = 5

        scrollView.addSubview(buttonsStackView)
        addSubview(scrollView)
    }

    private func setUpLayout() {
        buttonsStackView.pinToSuperview(edges: [.top, .bottom, .left, .right],
                                        constant: 5,
                                        priority: .defaultHigh)
        scrollView.pinToSuperview(edges: [.top, .bottom, .left, .right],
                                  constant: 0,
                                  priority: .defaultHigh)
    }

    func addModelButtons(models: [Model]) {

        models.forEach { model in
            let modelButton = UIButton()
            modelButton.backgroundColor = .lightGray
            modelButton.setTitle(model.fileName, for: .normal)
            modelButton.addTarget(self, action: #selector(modelButtonTapped), for: .touchUpInside)

            buttonsStackView.addArrangedSubview(modelButton)

            if let first = models.first,
                first.fileName == model.fileName {
                updateSelectedButtonColor(modelButton)
            }
        }
    }

    @objc private func modelButtonTapped(button: UIButton) {
        guard let modelName = button.titleLabel?.text else { return }
            onTap?(modelName)
            resetButtonColors()
            updateSelectedButtonColor(button)
    }

    private func resetButtonColors() {
        for case let button as UIButton in buttonsStackView.subviews {
            button.backgroundColor = .lightGray
        }
    }

    private func updateSelectedButtonColor(_ button: UIButton) {
        button.backgroundColor = .darkGray
    }
}

我看不到缺少什么。我添加了一张图片，因此您可以看到 stackView 环绕按钮而不是填充滚动视图。

任何帮助都会很棒。我确定这是一个简单的修复，我只是看不到它！

Answer 1

这里是关于scrollViews 的理解。除非您为 scrollView 的内容区域指定显式大小，否则它将根据其子视图确定其大小。

在您的情况下，您已经告诉它您的 stackView 是 5 点远离滚动视图的边缘。这将 stackView 的大小与 scrollView 的内容区域的大小联系起来。此时stackView正在控制scrollView的可滚动区域的大小。由于您的 stackView 只有 2 个按钮，因此 stackView 会缩小到这两个按钮的大小，并且 scrollView 的可滚动区域比 10 更宽。由于按钮很小，因此不会填满屏幕。

您想要的是按钮拉伸以填充滚动视图的外观大小。为此，您需要告诉 Auto Layout stackView 的宽度必须大于或等于 scrollView 的宽度 - 10。 p>

在scrollView.addSubview(buttonsStackView)之后添加这个约束：

buttonsStackView.widthAnchor.constraint(greaterThanOrEqualTo: scrollView.widthAnchor, multiplier: 1, constant: -10).isActive = true