UIScrollView 未顯示在 UIStackView 內

Question

我有一個 UIStackView 垂直堆疊兩個水平 UIStackViews。 那工作得很好。 但是第一個子 UIStackView 元素太多，所以我決定將它包裝在一個滾動視圖中。 問題是當我這樣做時，第一個子視圖就消失了，好像 UIScrollView 的高度為 0。

這是代碼：

func initViews(){
    let containerStack = UIStackView()
    addSubview(containerStack)
    containerStack.axis = .vertical
    containerStack.distribution = .equalCentering
    containerStack.isLayoutMarginsRelativeArrangement = true
    containerStack.layoutMargins = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    
    
    let scrollView = UIScrollView()
    let scrolledStack = UIStackView()
    containerStack.addArrangedSubview(scrollView)
    scrollView.addSubview(scrolledStack)
    scrolledStack.distribution = .fill
    scrolledStack.isLayoutMarginsRelativeArrangement = true
    scrolledStack.layoutMargins = UIEdgeInsets(top: 20, left: 30, bottom: 20, right: 30)
    
    scrolledStack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    scrolledStack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    scrolledStack.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    scrolledStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    scrolledStack.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
    
    
    let otherStack = UIStackView()
    containerStack.addArrangedSubview(otherStack)
    otherStack.distribution = .equalCentering
    otherStack.isLayoutMarginsRelativeArrangement = true
    otherStack.layoutMargins = UIEdgeInsets(top: 20, left: 30, bottom: 0, right: 30)
    
    
    containerStack.translatesAutoresizingMaskIntoConstraints = false
    containerStack.topAnchor.constraint(equalTo: topAnchor).isActive = true
    containerStack.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    containerStack.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
    containerStack.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    
    
    for number in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]{
        let text = UITextView()
        text.font = UIFont.boldSystemFont(ofSize: 14)
        text.text = number
        text.isScrollEnabled = false
        text.backgroundColor = .clear
        
        scrolledStack.addArrangedSubview(text)
    }
    for number in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]{
        let text = UITextView()
        text.font = UIFont.boldSystemFont(ofSize: 14)
        text.text = number
        text.isScrollEnabled = false
        text.backgroundColor = .clear
        
        otherStack.addArrangedSubview(text)
    }
}

otherStack 的行為符合預期，但 scrollView 和 scrolledStack 只是沒有出現。 如果我刪除 scrollView 並將 scrolledStack 添加到 containerStack，兩個堆棧都會按預期顯示。

Answer 1

許多 UI 視圖元素（例如UIScrollView ）沒有固有高度。

您將滾動視圖放在垂直堆棧視圖中，堆棧視圖設置為：

containerStack.distribution = .equalCentering

問題出現是因為如果堆棧視圖沒有高度，則堆棧視圖無法將其排列的子視圖居中。

如果您將containerStack更改為：

containerStack.distribution = .fillEqually

您將看到兩個排列好的子視圖。

如果您不希望它們具有相等的高度，那么您需要提供一些高度值......或者使用明確的scrollView.heightAnchor.constraint(equalToConstant: 100.0).isActive = true或者可能相對於整體高度。

---

編輯- 回應評論......

在initViews()函數的底部添加這些行：

scrolledStack.translatesAutoresizingMaskIntoConstraints = false

scrollView.backgroundColor = .red
scrolledStack.backgroundColor = .lightGray
otherStack.backgroundColor = .systemBlue
containerStack.backgroundColor = .systemGreen

並且，而不是.clear ，給出你的第一組文本視圖：

text.backgroundColor = .cyan

和您的第二組文本視圖：

text.backgroundColor = .green

這是我現在運行您的代碼時的樣子：

這可能不是您想要的，但是通過為您的視圖提供對比背景顏色，可以更輕松地查看正在發生的事情。

Answer 2

我重新編寫了一些您的代碼並創建了這個快速的游樂場：

import UIKit
import PlaygroundSupport

final class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let containerStack = UIStackView()
    view.addSubview(containerStack)
    containerStack.axis = .vertical
    containerStack.distribution = .equalCentering
    containerStack.translatesAutoresizingMaskIntoConstraints = false

    let scrollView = UIScrollView()
    let scrolledStack = UIStackView()
    scrolledStack.translatesAutoresizingMaskIntoConstraints = false
    containerStack.addArrangedSubview(scrollView)
    scrollView.addSubview(scrolledStack)

    NSLayoutConstraint.activate([
      scrolledStack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
      scrolledStack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
      scrolledStack.topAnchor.constraint(equalTo: scrollView.topAnchor),
      scrolledStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
      scrolledStack.centerYAnchor.constraint(equalTo: scrollView.centerYAnchor)
    ])

    let otherStack = UIStackView()
    containerStack.addArrangedSubview(otherStack)
    otherStack.distribution = .equalCentering
    otherStack.isLayoutMarginsRelativeArrangement = true
    otherStack.layoutMargins = UIEdgeInsets(top: 20, left: 30, bottom: 0, right: 30)

    NSLayoutConstraint.activate([
      containerStack.topAnchor.constraint(equalTo: view.topAnchor),
      containerStack.bottomAnchor.constraint(equalTo: view.bottomAnchor),
      containerStack.leftAnchor.constraint(equalTo: view.leftAnchor),
      containerStack.rightAnchor.constraint(equalTo: view.rightAnchor),
    ])

    for number in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]{
      let text = UILabel()
      text.font = UIFont.boldSystemFont(ofSize: 14)
      text.text = number

      scrolledStack.addArrangedSubview(text)
      NSLayoutConstraint.activate([
        text.widthAnchor.constraint(equalToConstant: 100)
      ])
    }
    for number in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]{
      let text = UILabel()
      text.font = UIFont.boldSystemFont(ofSize: 14)
      text.text = number

      otherStack.addArrangedSubview(text)
    }

  }
}

PlaygroundPage.current.liveView = ViewController()
PlaygroundPage.current.needsIndefiniteExecution = true