iOS UIStackView .fill UIScrollView 内的对齐不起作用答案

【问题标题】：iOS UIStackView .fill alignment inside UIScrollView not workingiOS UIStackView .fill UIScrollView 内的对齐不起作用
【发布时间】：2021-01-01 11:37:06
【问题描述】：

我有一个堆栈视图，它以编程方式插入到滚动视图中（效果很好），但是当我将滚动视图放在情节提要中的视图控制器内时，对齐方式为 .fill 并且组件的分布不是通过 UI 应用。然后我将其编码如下，但仍然无法正常工作。

下面是程序化实现的代码：

class RegisterVC: UIViewController{
    
    private let dataSource = ["Student","Academic Staff","Non academic Staff"]

    @IBOutlet weak var userPicker: UIPickerView!
    
    @IBOutlet weak var FirstName: UITextField!
    
    @IBOutlet weak var LastName: UITextField!
    
    @IBOutlet weak var EmailAddress: UITextField!
    @IBOutlet weak var Password: UITextField!
    
    //message popping validator labels
    
    
   
    @IBOutlet weak var firstNameLabel: UILabel!
    @IBOutlet weak var lastNameLabel: UILabel!
    @IBOutlet weak var emailAddressLabel: UILabel!
    @IBOutlet weak var passwordLabel: UILabel!
    
    @IBOutlet weak var scrollView: UIScrollView!
    
    @IBOutlet var formStackView: UIStackView!


    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView.translatesAutoresizingMaskIntoConstraints = false;
        self.scrollView.addSubview(formStackView)
        
        self.formStackView.translatesAutoresizingMaskIntoConstraints=false
        
        self.formStackView.alignment = .fill
        self.formStackView.distribution = .fillProportionally        
        
        self.formStackView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor,constant: 20).isActive=true
        self.formStackView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor,constant: 20).isActive=true
        self.formStackView.topAnchor.constraint(equalTo: self.scrollView.topAnchor,constant: 50).isActive=true
        self.formStackView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor).isActive=true
        
        //self.formStackView.widthAnchor.constraint(equalTo: self.view.widthAnchor).isActive=true
        
        userPicker.delegate=self
        userPicker.dataSource=self
    }
}


I'm a very basic beginner in iOS; I need your dire help, thank you.

【问题讨论】：

试着澄清你在做什么。您显示此行：self.scrollView.addSubview(formStackView) ... 但您没有显示 formStackView 来自哪里，或者，如果它在另一个视图控制器中，如您在故事板图像中显示的那样，您是如何加载它的。
它来自同一个，并且功能正常，问题是stacke元素不会根据其父元素（滚动视图）分布

标签： ios swift xcode storyboard

【解决方案1】：

这是在 Storyboard 中设计的一种不同寻常的方式...您可以将堆栈视图直接布局为滚动视图的子视图，并在那里设置约束（而不是通过代码）。

但是，我认为你这样做是有原因的，所以...

您希望将堆栈视图的顶部/前导/尾随/底部约束约束到滚动视图的内容布局指南 ...然后将其宽度约束到滚动视图的框架布局指南。

试试这样：

class RegisterVC: UIViewController {
    
    private let dataSource = ["Student","Academic Staff","Non academic Staff"]
    
    @IBOutlet weak var userPicker: UIPickerView!
    
    @IBOutlet weak var FirstName: UITextField!
    
    @IBOutlet weak var LastName: UITextField!
    
    @IBOutlet weak var EmailAddress: UITextField!
    @IBOutlet weak var Password: UITextField!
    
    //message popping validator labels
    
    
    
    @IBOutlet weak var firstNameLabel: UILabel!
    @IBOutlet weak var lastNameLabel: UILabel!
    @IBOutlet weak var emailAddressLabel: UILabel!
    @IBOutlet weak var passwordLabel: UILabel!
    
    @IBOutlet weak var scrollView: UIScrollView!
    
    @IBOutlet var formStackView: UIStackView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // not needed...
        //scrollView.translatesAutoresizingMaskIntoConstraints = false;
        
        // add form stack view to the scroll view
        scrollView.addSubview(formStackView)
        
        // because of the way this is designed in Storyboard,
        //  we need to set this to false
        formStackView.translatesAutoresizingMaskIntoConstraints = false
        
        // stack view alignment .fill
        formStackView.alignment = .fill
        
        // stack view distribution should be .fill
        formStackView.distribution = .fill  // .fillProportionally

        // we want to constrain the stack view to the scroll view's Content Layout Guide
        let svCLG = scrollView.contentLayoutGuide
        
        NSLayoutConstraint.activate([

            formStackView.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor, constant: 20),
            formStackView.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor, constant: 20),
            formStackView.topAnchor.constraint(equalTo: svCLG.topAnchor, constant: 50),
            formStackView.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor),

            // constrain stack view Width to scroll view's Frame Layout Guide
            //  minus 40-pts, because we have 20-pts on each side
            formStackView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor, constant: -40),

        ])
        
    }
}

【讨论】：