Swift 嵌套堆栈视图

Question

来自 android 背景，现在试图通过简单的登录视图示例来理解 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)
        }


    }

}

然后我在登录视图控制器中使用了这个class，如下所示：

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!);
}

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

我的查询：

为什么 passStackView 之前的视图没有显示？
为什么loginView不全屏（受限于loginStackView应该把loginStackView放在登录视图的中间）

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

这就是我所期待的：

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!);
    }

请注意，您还有一个 "built-in" superview 方法，因此可以这样写：

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

强烈推荐给你...我知道很多人使用 SnapKit 是为了方便，你可能会在 learning 自动布局和约束如何工作。当你遇到这样的情况时，只要了解它的基础知识就会有很大的帮助。

无论如何，物有所值。

Swift 嵌套堆栈视图

Swift Nested Stack Views

ios

swift

uistackview

snapkit