iOS UIStackView .fill 對齊在 UIScrollView 內不起作用

Question

我有一個以編程方式插入滾動視圖中的堆棧視圖（工作正常），但是當我將滾動視圖放入故事板中的視圖控制器中時，對齊方式為.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.

Answer 1

這是 Storyboard 中一種不尋常的設計方式……您可以將堆棧視圖直接布局為滾動視圖的子視圖，並在那里設置約束（而不是通過代碼）。

但是，我假設你有這樣做的理由，所以......

您想將堆棧視圖的頂部/前導/尾隨/底部約束約束到滾動視圖的Content Layout Guide ... 然后將其 Width 約束到滾動視圖的Frame Layout Guide 。

像這樣嘗試：

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),

        ])
        
    }
}