ios - Swift 嵌套堆栈 View

Question

来自 android 背景，现在试图通过简单的登录 View 示例来理解 ios 中的 UIStackView，但由于输出失真而感到困惑。以下是我的详细信息:

我的登录查看文件:

import UIKit
import SnapKit

class LoginView: UIView {

    let loginStackView = UIStackView();

    let emailStackView = UIStackView()
    let emailImageView = UIImageView()
    let emailTextView = UITextView();

    let passStackView = UIStackView()
    let passImageView = UIImageView()
    let passTextView = UITextView();

    let loginButton = UIButton();
    let loginButton2 = UIButton();

    override init(frame: CGRect) {
        super.init(frame: frame)
        loadUI();
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    private func loadUI(){

        self.addSubview(loginStackView);

        emailStackView.axis = .horizontal
        emailStackView.distribution = .equalSpacing
        emailStackView.translatesAutoresizingMaskIntoConstraints = false
        emailStackView.addArrangedSubview(emailImageView);
        emailStackView.addArrangedSubview(emailTextView);

        passStackView.axis = .horizontal
        passStackView.distribution = .equalSpacing
        passStackView.translatesAutoresizingMaskIntoConstraints = false
        passStackView.addArrangedSubview(passImageView);
        passStackView.addArrangedSubview(passTextView);

        loginStackView.axis = .vertical
        loginStackView.distribution = .fill
        loginStackView.alignment = .fill
        loginStackView.spacing = 10
        loginStackView.translatesAutoresizingMaskIntoConstraints = false
        loginStackView.addArrangedSubview(emailStackView);
        loginStackView.addArrangedSubview(loginButton);
        loginStackView.addArrangedSubview(passStackView);
        loginStackView.addArrangedSubview(loginButton2);
        loginStackView.snp.makeConstraints{(make) -> Void in
            make.center.equalToSuperview();
        }

        emailImageView.image = UIImage(named: "sample");
        emailImageView.snp.makeConstraints{(make) -> Void in
            make.height.equalTo(50)
            make.width.equalTo(50)
        }

        emailTextView.snp.makeConstraints{(make) -> Void in
            make.height.equalTo(50)
            make.width.equalTo(200)
        }


        passImageView.image = UIImage(named: "sample2");
        passImageView.snp.makeConstraints{(make) -> Void in
            make.height.equalTo(50)
            make.width.equalTo(50)
        }


        passTextView.snp.makeConstraints{(make) -> Void in
            make.height.equalTo(50)
            make.width.equalTo(200)
        }

        loginButton.setTitle("Login", for: .normal);
        loginButton.snp.makeConstraints{ (make) in
            make.height.equalTo(50)
            make.width.equalTo(250)
        }

        loginButton2.setTitle("Login2", for: .normal);
        loginButton2.snp.makeConstraints{ (make) in
            make.height.equalTo(50)
            make.width.equalTo(250)
        }


    }

}

然后我在登录 View Controller 中使用了这个类，如下所示:

let superview = self.view;

let loginView = LoginView();
superview?.addSubview(loginView);
superview?.backgroundColor = UIColor.lightGray;
loginView.backgroundColor = UIColor.red;

loginView.snp.makeConstraints{(make) -> Void in
make.height.equalTo(superview!);
make.width.equalTo(superview!);
}

对于上面的代码，我的输出是这样的:

我的查询:

1. 为什么 passStackView 之前的 View 没有显示？
2. 为什么loginView不全屏(限制loginStackView假设将loginStackView放入 登录 View 的中间)

仅当使用单个堆栈一切正常时，嵌套堆栈 View 才会发生这种情况。请让我知道我在这里缺少什么。

这就是我所期待的:

Answer 1

您实际上只错过了两个设置:

    loginView.snp.makeConstraints{(make) -> Void in
        make.height.equalTo(superview!);
        make.width.equalTo(superview!);

        // you also need to set position,
        // this will center the view
        make.centerX.equalTo(superview!);
        make.centerY.equalTo(superview!);
    }

请注意，您还有一个“内置” super View 方法，因此可以这样写:

    loginView.snp.makeConstraints{(make) -> Void in
        make.width.equalToSuperview()
        make.height.equalToSuperview()
        make.centerX.equalToSuperview()
        make.centerY.equalToSuperview()
    }

强烈建议您...我知道很多人使用 SnapKit 是为了方便，您可能会发现学习如何自动布局和约束起作用。当您遇到这样的情况时，仅仅了解它的基础知识就会有很大帮助。

无论如何，它的值(value)。