UIStack 视图不排列项目

Question

我已经以编程方式创建了堆栈视图。我对此给出了限制。我已使用 addArrangedSubview 函数将该字段添加到堆栈视图中。 我期望堆栈视图应该排列单元格属性（一个在另一个下面），请参阅预期的屏幕截图。但它没有正确排列视图。图像视图之间也存在间距问题。

这是单元格的代码..

class SimilierMovieCell: UICollectionViewCell {
    
    static let identifier = "CompanyCell"
    
    private lazy var similarMovieImage: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleToFill
        return imageView
    }()
    
    lazy var movieTitle: UILabel = {
        let movieTitle = UILabel()
        movieTitle.translatesAutoresizingMaskIntoConstraints = false
        movieTitle.font = UIFont.systemFont(ofSize: 20)
        return movieTitle
    }()
  
    //Stack View
    let stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.translatesAutoresizingMaskIntoConstraints = false;
        stackView.distribution = UIStackView.Distribution.equalSpacing
        stackView.alignment = UIStackView.Alignment.center
        stackView.spacing = 50.0
        return stackView
    }()

    func configureCell(movie: Movie) {
        
        contentView.addSubview(stackView)
        stackView.addArrangedSubview(similarMovieImage)
        stackView.addArrangedSubview(movieTitle)

        //Constraints
        let safeArea = contentView.safeAreaLayoutGuide

        NSLayoutConstraint.activate([
            stackView.centerXAnchor.constraint(equalTo: self.contentView.centerXAnchor),
            stackView.centerYAnchor.constraint(equalTo: self.contentView.centerYAnchor),
            
            similarMovieImage.topAnchor.constraint(equalTo: stackView.topAnchor),
            similarMovieImage.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor),
            similarMovieImage.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor),
            similarMovieImage.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor),
            
            movieTitle.topAnchor.constraint(equalTo: similarMovieImage.bottomAnchor),
            movieTitle.bottomAnchor.constraint(equalTo: safeArea.bottomAnchor),
            movieTitle.leadingAnchor.constraint(equalTo: safeArea.leadingAnchor),
            movieTitle.trailingAnchor.constraint(equalTo: safeArea.trailingAnchor),
          
        ])
        
       
        if let path = movie.posterPath {
            similarMovieImage.dm_setImage(posterPath: path)
        } else {
            similarMovieImage.image = nil
        }
        
        movieTitle.text = movie.title
    }
}

这是预期的结果。

这是我得到的结果..

()]()

Answer 1

您可能想要使用 collectionView。

目前，您只有一个可以垂直显示视图的 stackview。

如果你想使用 stackviews..

你想要的是一个滚动的水平堆栈视图。在水平堆栈视图中是另一个包含标题和图像的垂直堆栈视图。垂直 stackview 将需要宽度约束，以便它知道它可以在水平 stackview 中填充多少空间。