Quiz App中MultipleChoiceCell的图文自适应布局问题求解

折腾8小时确实够闹心的，我之前做类似的Quiz App时也踩过几乎一模一样的布局坑，给你几个针对性的解决方案，应该能帮你搞定：

一、先理清两种状态下的布局核心逻辑 #

不管用不用UIStackView，核心都是通过约束优先级和尺寸控制，让Cell在两种状态下都能正确适配：

1. 纯文本状态：让Label占满Cell宽度 #

用UIStackView的方案：

• 给Cell的contentView加一个水平UIStackView，里面只放选项文本Label
• 设置StackView的属性：alignment = .fill、distribution = .fill、spacing = 0
• 给StackView添加leading、trailing、top、bottom约束到contentView（注意是contentView，不是Cell本身），确保它占满Cell的可用宽度
• 给Label设置numberOfLines = 0、lineBreakMode = .byWordWrapping，不用额外调整优先级，默认设置就能让Label填充StackView的宽度

不用StackView的方案：

• 直接给Label添加leading、trailing、top、bottom约束到contentView，同样设置Label的换行属性
• 之前iPhone 5s失效大概率是约束没加对：要确保约束是相对于contentView的边缘，而不是Cell的frame；如果是iOS 11+，可以考虑绑定到contentView的safeAreaLayoutGuide，避免小屏机型上布局被截断

2. 带图片状态：固定ImageView尺寸+带标识的Label #

这里用UIStackView会更省心，关键是锁死ImageView的尺寸，让Label自动填充剩余空间：

• 用水平UIStackView，子视图顺序为：ImageView → 选项文本Label
• 设置StackView的属性：alignment = .center、distribution = .fill、spacing = 16（间距可以根据需求调整）
• 给ImageView添加widthAnchor.constraint(equalToConstant: 150)和heightAnchor.constraint(equalToConstant: 150)的约束，同时设置它的水平方向contentHuggingPriority = UILayoutPriority.required（1000），这样StackView绝对不会压缩ImageView的尺寸
• 处理Label：
  • 在Cell的配置方法里，根据选项的索引拼接标识（比如选项0就是"A) "，选项1就是"B) "），不用单独做一个Label放标识，直接拼到文本里更简单
  • 设置Label的numberOfLines = 0、lineBreakMode = .byWordWrapping
  • 设置Label的水平方向contentCompressionResistancePriority = UILayoutPriority.defaultHigh（750），确保空间不足时Label会换行，而不是挤压ImageView
• 给StackView添加leading、trailing、top、bottom约束到contentView，不要给Label加固定宽度，让StackView自动分配剩余空间

二、搞定跨机型适配问题 #

之前你提到的“iPhone X可行但5s失效”，大概率是这两个细节没处理好：

• 所有布局约束都要添加到Cell的contentView上，UITableViewCell的contentView会自动处理系统的内边距，直接绑Cell本身容易出问题
• 给TableView设置estimatedRowHeight = UITableView.automaticDimension、rowHeight = UITableView.automaticDimension，让TableView自动计算Cell的高度，不管是小屏还是大屏，都能自适应内容

三、修复StackView中Label占用过多空间的问题 #

这个问题通常是优先级设置错了，或者StackView的distribution属性不对：

• 确保ImageView的水平contentHuggingPriority是1000（最高优先级），StackView会优先保证它的尺寸，剩下的空间全给Label
• 把StackView的distribution设为.fill，别用.fillEqually或.fillProportionally，后者会让子视图按比例分配空间，导致Label抢空间
• 如果Label还是乱占空间，在Cell的layoutSubviews方法里加一行：label.preferredMaxLayoutWidth = label.bounds.width，让Label明确自己的最大宽度，正确换行

四、处理Cell复用的状态重置 #

因为同一个MultipleChoiceCell要在纯文本和带图片状态之间切换，一定要在prepareForReuse里重置状态，避免复用混乱：

override func prepareForReuse() {
    super.prepareForReuse()
    // 隐藏并清空ImageView
    optionImageView.isHidden = true
    optionImageView.image = nil
    // 清空Label文本
    optionLabel.text = ""
    // 如果是动态添加子视图的StackView，要清空旧视图
    stackView.arrangedSubviews.forEach { $0.removeFromSuperview() }
}

然后在配置方法里根据内容动态构建布局：

func configure(with option: QuizOption) {
    // 先清空StackView旧内容
    stackView.arrangedSubviews.forEach { $0.removeFromSuperview() }
    
    if let optionImage = option.image {
        optionImageView.image = optionImage
        optionImageView.isHidden = false
        stackView.addArrangedSubview(optionImageView)
    }
    
    // 拼接选项标识和文本
    let optionText = "\(option.indexLetter)) \(option.text)"
    optionLabel.text = optionText
    stackView.addArrangedSubview(optionLabel)
}

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