UIKit/Swift：子视图不可见/无法修改背景色问题求助

核心问题排查 #

1. 缺失宽高约束：cardView开启了自动布局（translatesAutoresizingMaskIntoConstraints = false），但仅添加了中心对齐约束，未设置宽高约束，导致视图实际尺寸为(0,0)，自然看不到红色背景和黑色边框。
2. 子视图约束错误：cardText的约束绑定到了父控制器view的中心，而非cardView的中心，导致文字脱离卡片范围。
3. 冗余视图层级操作：cardView.sendSubviewToBack(cardText)会把文字压在卡片背景下方（若卡片有尺寸）；view.sendSubviewToBack(cardView)等操作属于多余，默认视图添加顺序已保证层级合理性。

修复后的完整代码 #

class ViewController: UIViewController {
    var cardData = CardData()
    var recall = RecallManager()
    var card1 = SimpleCard(id: 1, deckID: 1)
    
    var frontFacing = true
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //cardText.text = cardData.fetchCardProperty(id: 1, property: "front") as? String
    }
    
    override func loadView() {
        view = UIView()
        view.backgroundColor = .white
        loadSimpleCard(card: card1)
    }
    
    func loadSimpleCard(card: SimpleCard) {
        let cardText = UILabel()
        let fbButton = UIButton(type: .system)
        let cardView = UIView() // 自动布局下无需初始化frame
        
        cardText.text = "Test"
        cardText.textAlignment = .center
        cardText.translatesAutoresizingMaskIntoConstraints = false
        
        fbButton.setTitle("Show back", for: .normal)
        fbButton.addTarget(self, action: #selector(turnOverCard), for: .touchUpInside)
        fbButton.setTitleColor(.black, for: .normal)
        fbButton.backgroundColor = .red
        fbButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(fbButton)
        
        cardView.translatesAutoresizingMaskIntoConstraints = false
        cardView.backgroundColor = .red
        cardView.layer.borderWidth = 20
        cardView.layer.borderColor = UIColor.black.cgColor
        cardView.alpha = 0.5
        view.addSubview(cardView)
        cardView.addSubview(cardText) // 文字默认在卡片视图上层
        print(cardView.backgroundColor)
        
        NSLayoutConstraint.activate([
            // 卡片视图约束：中心对齐+固定宽高
            cardView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            cardView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            cardView.widthAnchor.constraint(equalToConstant: 200),
            cardView.heightAnchor.constraint(equalToConstant: 200),
            
            // 文字约束：绑定到卡片视图中心
            cardText.centerXAnchor.constraint(equalTo: cardView.centerXAnchor),
            cardText.centerYAnchor.constraint(equalTo: cardView.centerYAnchor),
            
            // 按钮约束
            fbButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            fbButton.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 150)
        ])
    }
    
    @objc func turnOverCard() {
        // 实现翻卡逻辑
        frontFacing.toggle()
        // 可在此切换卡片文字或样式
    }
}

关键修改点 #

• 移除cardView的frame初始化，自动布局会覆盖frame设置。
• 给cardView添加widthAnchor和heightAnchor约束，明确200x200的尺寸。
• 将cardText的约束目标从view改为cardView，确保文字在卡片内部。
• 删除冗余的视图层级调整代码，默认添加顺序已保证按钮在最上层、文字在卡片上层。
• 将局部视图变量从var改为let，符合Swift不可变变量的最佳实践。

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