stackView 在 Swift 5 中设置自定义 UIView 的约束答案

【问题标题】：stackView set constraints of custom UIView in Swift 5stackView 在 Swift 5 中设置自定义 UIView 的约束
【发布时间】：2022-01-22 13:24:52
【问题描述】：

我正在尝试做一个类似tweet的演示，我使用StackView来控制“昵称”、“内容”、“图像”和“cmets”的布局，但是图像的布局有一些问题，就像下图：

我创建了一个自定义 UIView GalleyView 和 commentsView 来表示 images 和 comments。但是，我的演示中的图像布局不正确。但是，images 没有正确显示，comments 消失了。另外，Cell 无法正确计算高度，我也不知道出了什么问题。这是我的代码：

class WechatMomentListCell: UITableViewCell{
    
 func setup() {
        contentView.addSubview(senderAvatar)
        contentView.addSubview(stackView)
        
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.addArrangedSubview(senderNick)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        
        stackView.setCustomSpacing(10, after: senderNick)
        stackView.addArrangedSubview(content)
        stackView.setCustomSpacing(10, after: content)
        stackView.addArrangedSubview(images)
        stackView.setCustomSpacing(10, after: images)
        stackView.addArrangedSubview(comments)
        
        senderAvatar.clipsToBounds = true;
        senderAvatar.layer.cornerRadius = 10;
        senderAvatar.snp.makeConstraints{ (make) in
            make.leading.top.equalTo(20)
            make.width.height.equalTo(46)
        }
        
        stackView.snp.makeConstraints{(make) in
            make.top.equalTo(20)
            make.leading.equalTo(senderAvatar.snp.trailing).offset(10)
            make.bottom.trailing.equalTo(-16)
        }
        
        senderNick.textColor = UIColor.init(red: 91, green: 106, blue: 175)
        senderNick.font = UIFont.boldSystemFont(ofSize: 20)

        content.lineBreakMode = NSLineBreakMode.byWordWrapping;
        content.numberOfLines = 0;

        //I didn't set constraints to images and comments

这是我的GalleryViews 课程：

class GalleryView: UIView {
    var imageViews: [UIImageView] = []
    
    func config(tweet: Tweet?) {
        for i in tweet?.images ?? [] {
            let flagImage = UIImageView()
            flagImage.sd_setImage(with: URL(string: i.url))
            self.imageViews.append(flagImage)
        }
        setup()
    }
    
    func setup() {
        if imageViews.count != 0 {
            switch imageViews.count{
            case 1:
                addSubview(imageViews[0])
                imageViews[0].snp.makeConstraints{ (make) in
                    make.leading.top.equalToSuperview()
                    make.width.height.equalTo(180)
                }
            default:
                for index in 0...imageViews.count - 1 {
                    addSubview(imageViews[index])
                    imageViews[index].snp.makeConstraints{ (make) in
                        make.leading.equalTo(((index)%3)*109)
                        make.top.equalTo(((index)/3)*109)
                        make.width.height.equalTo(90)
                    }
                }
            }
        }
    }

【问题讨论】：

将图片保存在单独的视图中，将文本保存在单独的视图中。然后将这两个视图放入您的堆栈视图中。
谢谢，我一个小时前就知道了！它是由 Xcode 在 if 判断时的提醒引起的。这太简单了，所以我没有检查那个地方。当计数不为零时，我会隐藏图片，这会导致问题。

标签： ios swift uiview uikit uistackview

【解决方案1】：

当您使用包含 UIView 列表的堆栈视图时，您应该在每次使用它时重置堆栈视图，然后再开始附加排列的子视图。

stackView.arrangedSubviews.forEach({ $0.removeFromSuperview() })

【讨论】：

我应该在 func prepareForReuse 中重置吗？并且编译器显示“'UIStackView'类型的值没有成员'forEach'”
对不起，我忘记了排列的子视图部分，我已经编辑了答案。现在，这应该可以了。你也可以在setup() 方法中做到这一点。
谢谢，在我的情况下，我只需要从超级视图中删除所有图像。