在 Swift 中使用水平和垂直堆栈视图显示属性

Question

我是 swift 的新手。我正在按照编程方法创建视图。我创建了两个堆栈视图。一种是水平的，另一种是垂直的。进入水平堆栈视图我想显示标签属性和垂直堆栈视图我想显示图像。我想在左侧显示 图像，在右侧显示标签属性。

这是我使用的代码..

import UIKit

class PeopleCell: UITableViewCell {

    
    static let identifier = "PeopleCell"
    
    private lazy var mainStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.alignment = .leading
        return stackView
    }()
    
    private lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .horizontal
        stackView.distribution = .fill
        stackView.alignment = .center
        return stackView
    }()
    private lazy var lastnameTitleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.textAlignment = .center
        return label
    }()
    
    private lazy var firstnameTitleLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.textAlignment = .center
        return label
    }()
    
    private lazy var peopleImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFit
       // imageView.backgroundColor = .blue
        return imageView
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        setUpUI()
    }
   
    
   required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    func configureCell(firstName: String, lastName: String) {
        firstnameTitleLabel.text = "Firstname :\(firstName)"
        lastnameTitleLabel.text = "Lastname : \(lastName)"
        
        }
        
    
    func configureImageCell(row: Int, viewModel: ViewModel) {
        
        peopleImageView.image = nil
        
        viewModel
            .downloadImage(row: row) { [weak self] data in
                let image = UIImage(data: data)
                self?.peopleImageView.image = image
            }
    }
    
    private func setUpUI() {
        
        stackView.addArrangedSubview(lastnameTitleLabel)
        stackView.addArrangedSubview(firstnameTitleLabel)
        
        mainStackView.addArrangedSubview(peopleImageView)
        mainStackView.addArrangedSubview(stackView)
        
        contentView.addSubview(mainStackView)
        
        // constraints
        let safeArea = contentView.safeAreaLayoutGuide
        
        mainStackView.topAnchor.constraint(equalTo: safeArea.topAnchor).isActive = true
        mainStackView.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor).isActive = true
        mainStackView.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor, constant: 10).isActive = true
        mainStackView.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor, constant: -10).isActive = true
        
        peopleImageView.heightAnchor.constraint(equalToConstant: 140).isActive = true
        peopleImageView.widthAnchor.constraint(equalToConstant: 140).isActive = true
        
        stackView.leadingAnchor.constraint(equalTo: mainStackView.leadingAnchor).isActive = true
        stackView.trailingAnchor.constraint(equalTo: mainStackView.trailingAnchor).isActive = true
        
        
    }
}

这是截图..

这是预期的结果。

Answer 1

主要问题是您的 .axis 属性颠倒了。

您希望 mainStackView.axis 为 .horizontal，stackView.axis 为 .vertical。

此外，不需要这两行（并且会导致问题）：

// don't do this
//stackView.leadingAnchor.constraint(equalTo: mainStackView.leadingAnchor).isActive = true
//stackView.trailingAnchor.constraint(equalTo: mainStackView.trailingAnchor).isActive = true

作为旁注，而不是：

let safeArea = contentView.safeAreaLayoutGuide

您可能想使用：

let safeArea = contentView.layoutMarginsGuide

它给你默认的单元格边距。

编辑

// this is the "main" stack view with
//   the image on the left
//   the labels on the right
// so it needs to be HORIZONTAL
private lazy var mainStackView: UIStackView = {
    let stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false

    //stackView.axis = .vertical
    stackView.axis = .horizontal

    stackView.distribution = .fill
    return stackView
}()

// this is the "labels" stack view with
//   two (or more) labels from top down
// so it needs to be VERTICAL
private lazy var stackView: UIStackView = {
    let stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false

    //stackView.axis = .horizontal
    stackView.axis = .vertical

    stackView.distribution = .fill
    return stackView
}()

在 Swift 中使用水平和垂直堆栈视图显示属性

Displaying property with Horizontal and Vertical Stack View in Swift

swift

uistackview

在 Swift 中使用水平和垂直堆栈视图显示 属性

Displaying property with Horizontal and Vertical Stack View in Swift

swift

uistackview

在 Swift 中使用水平和垂直堆栈视图显示属性