如何修复重复创建StackView子视图时首个单元格样式异常的问题？

嘿，我仔细看了你的代码和问题描述，马上就找到问题根源啦！

你的核心问题出在类级别的视图变量冗余+循环创建视图时遗漏关键布局配置这两点上，咱们一步步拆解：

问题原因分析 #

1. 多余的类级视图变量：你把cellStackView、titleLabel、imageView都定义成了类的存储属性，还提前用闭包初始化了。但你在循环里每次都重新给这些变量赋值新的视图实例，这不仅完全没必要，还容易让你混淆“类初始视图”和“循环创建的新视图”的区别，甚至可能引发隐性的布局冲突。
2. 循环创建视图时遗漏关键配置：你在类里定义cellStackView时，设置了axis = .horizontal、spacing = 32、distribution = .fill这些核心布局属性，但在setupMenu的循环里，你创建新的cellStackView = UIStackView()后，完全没设置这些属性！新创建的UIStackView会用系统默认值（比如默认spacing是0），这就导致三次循环创建的单元格布局参数不一致，出现首个单元格样式异常的情况。

修复步骤 #

我们直接重构代码，删掉冗余的类级视图变量，在循环内部创建局部视图，确保每个单元格的配置完全一致：

修复后的完整代码 #

let cellCount = 3

var textArray = ["some some text", "some some text", "some some text"]
var iconArray = [UIImage(named: "envelope"), UIImage(named: "envelope"), UIImage(named: "envelope")]

private lazy var menuStackView: UIStackView = {
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.spacing = 16
    stackView.distribution = .fillEqually
    stackView.translatesAutoresizingMaskIntoConstraints = false
    return stackView
}()

override func viewDidLoad() {
    super.viewDidLoad()
    setupView()
    setupConstraints()
    setupMenu()
}

func setupView() {
    view.addSubview(menuStackView)
}

func setupConstraints() {
    menuStackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0.0).isActive = true
    menuStackView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0.0).isActive = true
    menuStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0.0).isActive = true
    menuStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0.0).isActive = true
}

func setupMenu() {
    for index in 0..<cellCount { // 改成0-based索引，避免index-1的转换，更直观
        // 1. 创建当前单元格的StackView，完整配置布局属性
        let cellStackView = UIStackView()
        cellStackView.axis = .horizontal
        cellStackView.spacing = 32
        cellStackView.distribution = .fill
        cellStackView.tag = index + 1
        cellStackView.backgroundColor = .white.withAlphaComponent(0.75)
        cellStackView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        cellStackView.layer.borderColor = UIColor.white.cgColor
        cellStackView.layer.borderWidth = 4
        cellStackView.layer.cornerRadius = 24
        cellStackView.translatesAutoresizingMaskIntoConstraints = false
        menuStackView.addArrangedSubview(cellStackView)
        
        // 2. 创建当前单元格的标题Label
        let titleLabel = UILabel()
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.backgroundColor = .red
        titleLabel.textAlignment = .left
        titleLabel.textColor = .white
        titleLabel.font = UIFont(name: "Marker Felt", size: 22)
        titleLabel.layer.shadowColor = UIColor.black.cgColor
        titleLabel.layer.shadowOffset = CGSize.zero
        titleLabel.layer.shadowOpacity = 0.4
        titleLabel.layer.shadowRadius = 4
        titleLabel.text = textArray[index]
        cellStackView.addArrangedSubview(titleLabel)
        
        // 3. 创建当前单元格的图标ImageView
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.backgroundColor = .blue
        imageView.contentMode = .scaleAspectFit
        imageView.sizeToFit()
        imageView.layer.shadowColor = UIColor.black.withAlphaComponent(1.0).cgColor
        imageView.layer.shadowOffset = CGSize.zero
        imageView.layer.shadowOpacity = 0.2
        imageView.layer.shadowRadius = 3
        imageView.image = iconArray[index]
        // 设置图标固定尺寸
        imageView.widthAnchor.constraint(equalToConstant: 32).isActive = true
        imageView.heightAnchor.constraint(equalToConstant: 32).isActive = true
        cellStackView.addArrangedSubview(imageView)
        
        // 4. 设置单元格的内边距
        cellStackView.layoutMargins = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
        cellStackView.isLayoutMarginsRelativeArrangement = true
    }
}

额外优化说明 #

• 把循环索引改成0..<cellCount，直接对应数组的0-based索引，不用再写index-1，更直观不容易出错。
• 每个视图的配置和数据绑定都放在循环内部的局部变量里，逻辑更清晰，也避免了类级变量的冗余引用。
• 把视图的属性配置（比如label的字体、阴影，imageView的内容模式）都和创建代码放在一起，后续维护起来更方便。

这样修改后，三个单元格的布局参数完全一致，就不会出现首个单元格样式异常的问题啦！

备注：内容来源于stack exchange，提问作者Alex Smith