UIStackView 宽度和高度不改变以下元素添加

Posted 2023-02-27

【中文标题】UIStackView 宽度和高度不改变以下元素添加

【英文标题】：UIStackView width & height not changing following elements addition

【发布时间】：2018-06-03 15:17:39

【问题描述】：

上下文

我正在尝试以编程方式创建 UIStackView，但它根本没有显示。

为了测试，我创建了 2 个小的 UIViews，我将它们添加到 UIStackView。

我试过了

向UIStackView 添加约束 使用layoutIfNeeded 使用layoutSubviews

但没有任何效果。

代码

import UIKit

class ViewController: UIViewController 
    var contentStack = UIStackView()

    @IBOutlet weak var mainScroll: UIScrollView!

    override func viewDidLoad() 
        super.viewDidLoad()

        contentStack.backgroundColor = #colorLiteral(red: 0.05882352963, green: 0.180392161, blue: 0.2470588237, alpha: 1)
        contentStack.axis = .vertical
        contentStack.spacing = 0
        contentStack.alignment = .top
        contentStack.distribution = .equalSpacing

        let a_view = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 30))
        a_view.backgroundColor = #colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
        contentStack.addArrangedSubview(a_view)

        let b_view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 40))
        b_view.backgroundColor = #colorLiteral(red: 0.9607843161, green: 0.7058823705, blue: 0.200000003, alpha: 1)
        contentStack.addArrangedSubview(b_view)

        mainScroll.addSubview(contentStack)
        contentStack.topAnchor.constraint(equalTo: mainScroll.topAnchor).isActive = true
        contentStack.leftAnchor.constraint(equalTo: mainScroll.leftAnchor).isActive = true
        contentStack.bottomAnchor.constraint(equalTo: mainScroll.bottomAnchor).isActive = true
        contentStack.rightAnchor.constraint(equalTo: mainScroll.rightAnchor).isActive = true
        mainScroll.contentSize = CGSize(width: self.view.frame.width, height: contentStack.frame.height)

        print("Stack Content Size: (\(contentStack.frame.width), \(contentStack.frame.height))");
    

输出

问题

阅读文档后，我假设UIStackView的高度和宽度都随着视图添加后包含堆栈视图大小的元素而适应，它是Stack Content Size: (0.0, 0.0)？

【问题讨论】：

您在 IB 中遇到问题，Aslo translateAutoresizingMaskIntoconstarints = false 应该用于以编程方式添加的视图

Interface Builder 有什么问题？

另外，我尝试将 translatesAutoresizingMaskIntoConstraints = false 放在 UIStackView 和两个 UIView 上，但一无所获

我怀疑这个问题与使用 UIScrollView 和 AutoLayout 有关。他们很难一起工作。这是来自 Apple 的关于该主题的技术 Note。另外，附注：我认为您实际上不能设置 UIStackView 的背景颜色，因为它是非绘图视图。认为您可以设置背景颜色可能会影响您的调试过程。

@JaredH 会看看Debug View Hierarchy，是的，我实际上正在阅读intrinsic content size。谢谢

【参考方案1】：

尝试为 a_view 和 b_view 设置约束，如下所示

let a_view = UIView()
a_view.translatesAutoresizingMaskIntoConstraints = false
a_view.heightAnchor.constraint(equalToConstant: 30).isActive = true
a_view.widthAnchor.constraint(equalToConstant: 30).isActive = true

堆栈视图使用固有内容大小，因此使用布局约束来定义视图的尺寸。

如果这不起作用，那么我怀疑滚动视图约束可能存在一些问题。

【讨论】：

行得通，我以为加个frame就可以定义view的大小，但是好像加个宽高约束是必须的，你知道为什么吗？

正如@Akshay 所说-UIStackView 使用排列的子视图的内在内容大小来确定大小。