无Storyboard场景下自定义UITableViewCell内嵌多个UIStackView不生效问题

现有代码核心错误点 #

• 所有UI控件未开启translatesAutoresizingMaskIntoConstraints = false，纯代码创建的控件默认该属性为true，会自动生成和frame绑定的约束，和手动添加的约束冲突，直接导致布局失效
• layoutSubviews会在视图生命周期中多次触发，在此方法内重复执行addSubview、添加约束会产生冗余约束，甚至触发崩溃，该方法不应该承担视图添加、约束配置的职责
• 仅配置了myProfileStackView，其余已定义的统计类栈视图、标签完全没有加入视图层级，也没有对应约束，自然无法显示
• 重复设置控件的无效frame，使用AutoLayout时frame的手动设置不会生效
• 未配置tableView的自动行高规则，若行高为0也会导致单元格完全不可见

各方法职责规范 #

你需要严格按照以下边界划分方法职责，即可解决布局逻辑混乱的问题：

• 初始化方法init(style: reuseIdentifier:)：负责所有视图的创建、固定属性（如栈视图的axis、spacing，标签的字体对齐方式等）的一次性配置、addSubview操作、添加固定约束，整个单元格复用周期内仅执行一次
• configure()方法：仅负责填充动态数据（如用户名、统计数值、头像等会随业务变化的内容），每次单元格被复用时调用
• layoutSubviews()方法：仅处理需要依赖父视图bounds的动态配置，例如给头像切圆角（需要拿到控件最终bounds才能切出正确的圆角），禁止在此方法内添加视图、添加约束

修正后的代码示例 #

class StatsOverViewCell: UITableViewCell {
    static let identifier = "StatsOverViewCell"
    
    // MARK: 控件定义
    // 顶部切换按钮
    private let toggleButton = UIButton(type: .system)
    
    // 左侧用户信息区域
    private let profileStackView = UIStackView()
    private let avatarImageView = UIImageView()
    private let nameLabel = UILabel()
    private let genderAgeLabel = UILabel()
    
    // 右侧统计区域
    private let statsContainerStackView = UIStackView()
    // 第一行统计
    private let firstLineStatsStack = UIStackView()
    private let stat1Stack = UIStackView()
    private let stat1ValueLabel = UILabel()
    private let stat1DescLabel = UILabel()
    // 可按相同规则定义stat2、stat3...
    
    // 第二行统计
    private let secondLineStatsStack = UIStackView()
    // 按规则定义对应统计项
    
    // MARK: 初始化
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupViews()
    }
    
    required init?(coder: NSCoder) {
        fatalError("已禁用Storyboard，该方法无需实现")
    }
    
    // MARK: 布局配置（仅执行一次）
    private func setupViews() {
        // 全局关闭自动约束转换
        contentView.autoresizingMaskIntoConstraints = false
        [profileStackView, avatarImageView, nameLabel, genderAgeLabel, statsContainerStackView, firstLineStatsStack, stat1Stack, stat1ValueLabel, stat1DescLabel, secondLineStatsStack, toggleButton].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        // 内容View基础配置
        contentView.backgroundColor = Utilities.hexStringToUIColor(hex: "#3F454B")
        contentView.layer.borderWidth = 1
        
        // 顶部按钮配置
        toggleButton.setTitle("切换统计维度", for: .normal)
        contentView.addSubview(toggleButton)
        
        // 左侧用户栈配置
        profileStackView.axis = .vertical
        profileStackView.distribution = .equalSpacing
        profileStackView.spacing = 3.5
        profileStackView.alignment = .center
        profileStackView.addArrangedSubview(avatarImageView)
        profileStackView.addArrangedSubview(nameLabel)
        profileStackView.addArrangedSubview(genderAgeLabel)
        
        // 头像配置
        avatarImageView.contentMode = .scaleAspectFill
        avatarImageView.clipsToBounds = true
        avatarImageView.widthAnchor.constraint(equalToConstant: 60).isActive = true
        avatarImageView.heightAnchor.constraint(equalToConstant: 60).isActive = true
        
        // 用户名配置
        nameLabel.font = UIFont(name: "montserrat", size: 16)
        nameLabel.textColor = .white
        nameLabel.textAlignment = .center
        
        // 性别年龄配置
        genderAgeLabel.font = UIFont(name: "montserrat", size: 12)
        genderAgeLabel.textColor = .lightGray
        genderAgeLabel.textAlignment = .center
        
        // 统计区域容器配置
        statsContainerStackView.axis = .vertical
        statsContainerStackView.spacing = 16
        statsContainerStackView.addArrangedSubview(firstLineStatsStack)
        statsContainerStackView.addArrangedSubview(secondLineStatsStack)
        
        // 第一行统计配置
        firstLineStatsStack.axis = .horizontal
        firstLineStatsStack.distribution = .equalSpacing
        firstLineStatsStack.addArrangedSubview(stat1Stack)
        // 添加stat2、stat3...
        
        // 单个统计项配置
        stat1Stack.axis = .vertical
        stat1Stack.spacing = 4
        stat1Stack.alignment = .center
        stat1Stack.addArrangedSubview(stat1ValueLabel)
        stat1Stack.addArrangedSubview(stat1DescLabel)
        
        stat1ValueLabel.font = UIFont(name: "montserrat", size: 18)
        stat1ValueLabel.textColor = .white
        stat1DescLabel.font = UIFont(name: "montserrat", size: 14)
        stat1DescLabel.textColor = .lightGray
        
        // 第二行统计按相同规则配置...
        
        // 根层级添加视图
        contentView.addSubview(profileStackView)
        contentView.addSubview(statsContainerStackView)
        
        // 全局约束配置
        NSLayoutConstraint.activate([
            // 顶部按钮约束
            toggleButton.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
            toggleButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            
            // 左侧用户栈约束
            profileStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 23),
            profileStackView.topAnchor.constraint(equalTo: toggleButton.bottomAnchor, constant: 20),
            profileStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -20),
            
            // 右侧统计区域约束
            statsContainerStackView.leadingAnchor.constraint(equalTo: profileStackView.trailingAnchor, constant: 32),
            statsContainerStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -23),
            statsContainerStackView.centerYAnchor.constraint(equalTo: profileStackView.centerYAnchor)
        ])
    }
    
    // MARK: 动态数据填充（每次复用时调用）
    public func configure(avatar: UIImage?, name: String, genderAge: String, stat1Value: String, stat1Desc: String) {
        avatarImageView.image = avatar ?? UIImage(named: "person-icon")
        nameLabel.text = name
        genderAgeLabel.text = genderAge
        stat1ValueLabel.text = stat1Value
        stat1DescLabel.text = stat1Desc
        // 其余数据填充...
    }
    
    // MARK: 仅处理依赖bounds的配置
    override func layoutSubviews() {
        super.layoutSubviews()
        // 切圆角需要拿到最终bounds，所以放在这里
        avatarImageView.layer.cornerRadius = avatarImageView.bounds.height / 2
    }
}

UITableView侧配套配置 #

你需要在UITableView初始化时添加以下配置，开启自动行高计算，否则单元格高度会异常：

tableView.rowHeight = UITableView.automaticDimension
tableView.estimatedRowHeight = 200 // 填和你预期单元格高度接近的数值即可

内容的提问来源于stack exchange，提问作者Jan L