为什么我在 UIScrollView 中看不到 UIStackView？

Question

我要将UIStackView 放到UIScrollView 中。为了更简单，我将制作一个思维导图。我放入 UIScrollView 的 UIStackView 是一个思维导图的对象。这样，内嵌的UIStackView就会出现在UIScrollView的所有区域。

但是，虽然我为UIScrollView指定了UIStackView的位置，但UIStackView并没有出现在UIScrollView中。

我的界面构建器（附加一个界面构建器图像以了解我的视图层次结构。）：

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var createObject: UIBarButtonItem!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let redView = UIView()
        redView.backgroundColor = .red

        let blueView = UIView()
        blueView.backgroundColor = .blue

        let stackView = UIStackView(arrangedSubviews: [redView, blueView])
        stackView.axis = .vertical
        stackView.distribution = .fillEqually

        stackView.center = scrollView.center

        scrollView.addSubview(stackView)
    }
}

Answer 1

UIView 和 UIStackView 都没有固有大小。

因此，您最终添加了一个大小为 0, 0 的堆栈视图，其中包含两个视图，每个视图的大小为 0, 0。

您需要在某处应用一些尺码。

这将为您提供一个堆栈视图，它与滚动视图的宽度相等，高度是滚动视图的两倍（因此您有一个 "full-height" 蓝色视图和一个 "full-height" 红色视图）：

class ViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let redView = UIView()
        redView.backgroundColor = .red

        let blueView = UIView()
        blueView.backgroundColor = .blue

        let stackView = UIStackView(arrangedSubviews: [redView, blueView])
        stackView.axis = .vertical
        stackView.distribution = .fillEqually

        scrollView.addSubview(stackView)

        stackView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0.0),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0.0),
            stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 0.0),
            stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 0.0),

            stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: 0.0),
            stackView.heightAnchor.constraint(equalTo: scrollView.heightAnchor, multiplier: 2.0),
            ])

    }
}

编辑：

这是另一个例子。它添加了 6 个子视图，具有指定的宽度和高度。堆栈视图属性更改为：

.alignment = .center
.distribution = .fill
.spacing = 8

结果：

并向下滚动：

和代码：

class ViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let colors: [UIColor] = [
            .red,
            .blue,
            .green,
            .orange,
            .yellow,
            .cyan,
        ]

        let sizes: [CGSize] = [
            CGSize(width: 100, height: 150),
            CGSize(width: 250, height: 100),
            CGSize(width: 200, height: 120),
            CGSize(width: 160, height: 200),
            CGSize(width: 220, height: 180),
            CGSize(width:  60, height:  80),
        ]

        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.alignment = .center
        stackView.spacing = 8

        for (color, size) in zip(colors, sizes) {
            let v = UIView()
            v.translatesAutoresizingMaskIntoConstraints = false
            v.widthAnchor.constraint(equalToConstant: size.width).isActive = true
            v.heightAnchor.constraint(equalToConstant: size.height).isActive = true
            v.backgroundColor = color
            stackView.addArrangedSubview(v)
        }

        scrollView.addSubview(stackView)

        stackView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0.0),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0.0),
            stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 0.0),
            stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 0.0),

            stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: 0.0),

            // do NOT set a heightAnchor ... let the subviews define the height
//          stackView.heightAnchor.constraint(equalTo: scrollView.heightAnchor, multiplier: 2.0),
            ])

    }
}

Answer 2

您还没有将 frame 设置为 stackview。尝试添加

stackView.frame = UIScreen.main.bounds

添加子视图后。

为什么我在 UIScrollView 中看不到 UIStackView？

Why can't I see UIStackView in UIScrollView?

uiscrollview

ios

swift

uistackview