使用堆栈视图以编程方式创建布局，并且约束不起作用

我还使用了NSLayoutConstraint.activate来激活最后两个约束，而不是将它们添加到view中.通常，您想激活约束而不是将约束添加到视图中.让iOS找出将其添加到哪些视图.class ViewController: UIViewController { lazy var stackView: UIStackView = { let stackView = UIStackView(arrangedSubviews: [smallRectangleView, bigRectangleView, bigRectangleView2]) stackView.alignment = .fill stackView.distribution = .fill stackView.axis = .vertical stackView.translatesAutoresizingMaskIntoConstraints = false return stackView }() var smallRectangleView: UIView = { let view = UIView() view.backgroundColor = .orange view.translatesAutoresizingMaskIntoConstraints = false return view }() var bigRectangleView: UIView = { let view = UIView() view.backgroundColor = .green view.translatesAutoresizingMaskIntoConstraints = false return view }() var bigRectangleView2: UIView = { let view = UIView() view.backgroundColor = .purple view.translatesAutoresizingMaskIntoConstraints = false return view }() override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. setupLayout() print(stackView.frame) } func setupLayout() { // Stack View view.addSubview(stackView) stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true // Small Recntangle View let heightConstraint1 = NSLayoutConstraint(item: smallRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView, attribute: .height, multiplier: 0.25, constant: 0.0) // Big Rectangle View let heightConstraint2 = NSLayoutConstraint(item: bigRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView2, attribute: .height, multiplier: 1.0, constant: 0.0) NSLayoutConstraint.activate([heightConstraint1, heightConstraint2]) }}I'm trying to create this layout programmatically in Swift.https://codepen.io/anon/pen/NXRQbJThe first rectangle is small. And the other 2 rectangles are the same size but bigger than the first rectangle.Here is the entire View Controller. I am not using storyboard. All my code is in this view controller.import UIKitclass ViewController: UIViewController { lazy var stackView: UIStackView = { let stackView = UIStackView(arrangedSubviews: [smallRectangleView, bigRectangleView, bigRectangleView2]) stackView.alignment = .fill stackView.distribution = .fillProportionally stackView.axis = .vertical stackView.translatesAutoresizingMaskIntoConstraints = false return stackView }() var smallRectangleView: UIView = { let view = UIView() view.backgroundColor = .orange view.translatesAutoresizingMaskIntoConstraints = false return view }() var bigRectangleView: UIView = { let view = UIView() view.backgroundColor = .green view.translatesAutoresizingMaskIntoConstraints = false return view }() var bigRectangleView2: UIView = { let view = UIView() view.backgroundColor = .purple view.translatesAutoresizingMaskIntoConstraints = false return view }() override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. setupLayout() print(stackView.frame) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func setupLayout() { // Stack View view.addSubview(stackView) stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true // Small Recntangle View let heightConstraint1 = NSLayoutConstraint(item: smallRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView, attribute: .height, multiplier: 4.0, constant: 0.0) // Big Rectangle View let heightConstraint2 = NSLayoutConstraint(item: bigRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView2, attribute: .height, multiplier: 0.0, constant: 0.0) view.addConstraints([heightConstraint1, heightConstraint2]) }}heightConstraint1 and heightConstraint2 is causing errors. I don't know why.// Small Recntangle Viewlet heightConstraint1 = NSLayoutConstraint(item: smallRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView, attribute: .height, multiplier: 4.0, constant: 0.0)// Big Rectangle Viewlet heightConstraint2 = NSLayoutConstraint(item: bigRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView2, attribute: .height, multiplier: 0.0, constant: 0.0)view.addConstraints([heightConstraint1, heightConstraint2])When I run this app on the simulator nothing shows up. It's just a blank white screen. Also in the debugger there are issues with constraints. 解决方案 The main problem seems to be the stackView.distribution. I changed it from .fillProportionally to just .fill. I suspect the issue was that the views were already relative to each other because of your constraints and that lead to conflicts.Other changes I made, your multiplier in one of your constraints needs to be 0.25 instead of 4, and in the second one the multiplier needs to be 1 instead of 0.I also used NSLayoutConstraint.activate to activate the last 2 constraints instead of adding them to the view. In general, you want to activate constraints instead of adding them to views. Let iOS figure out which views to add them to.class ViewController: UIViewController { lazy var stackView: UIStackView = { let stackView = UIStackView(arrangedSubviews: [smallRectangleView, bigRectangleView, bigRectangleView2]) stackView.alignment = .fill stackView.distribution = .fill stackView.axis = .vertical stackView.translatesAutoresizingMaskIntoConstraints = false return stackView }() var smallRectangleView: UIView = { let view = UIView() view.backgroundColor = .orange view.translatesAutoresizingMaskIntoConstraints = false return view }() var bigRectangleView: UIView = { let view = UIView() view.backgroundColor = .green view.translatesAutoresizingMaskIntoConstraints = false return view }() var bigRectangleView2: UIView = { let view = UIView() view.backgroundColor = .purple view.translatesAutoresizingMaskIntoConstraints = false return view }() override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. setupLayout() print(stackView.frame) } func setupLayout() { // Stack View view.addSubview(stackView) stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true // Small Recntangle View let heightConstraint1 = NSLayoutConstraint(item: smallRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView, attribute: .height, multiplier: 0.25, constant: 0.0) // Big Rectangle View let heightConstraint2 = NSLayoutConstraint(item: bigRectangleView, attribute: .height, relatedBy: .equal, toItem: bigRectangleView2, attribute: .height, multiplier: 1.0, constant: 0.0) NSLayoutConstraint.activate([heightConstraint1, heightConstraint2]) }} 这篇关于使用堆栈视图以编程方式创建布局，并且约束不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！