求助：无法在Interface Builder中预览IBDesignable自定义组件

我完全懂你这种头疼的感觉——自定义UI组件在真机和模拟器里跑起来好好的，到了Interface Builder里就只剩个光秃秃的矩形，甚至跟着教程走都踩坑，确实挺闹心的。针对你的情况，咱们一步步来排查解决：

先排查最容易忽略的Xcode/IB配置问题 #

• 首先确认你的自定义控件类加了@IBDesignable标记！这个是告诉IB“我要实时渲染这个控件”的关键，要是教程里的代码漏了这个，那肯定看不到子控件细节。
• 检查IB里的控件是否正确关联了自定义类：打开Identity Inspector，确保Class字段选对了你的控件类，别拼错名字。
• 清理缓存试试：Xcode菜单栏选Product > Clean Build Folder，然后重启Xcode和IB——有时候缓存会搞出各种奇怪的渲染问题。
• 确认项目Build Settings里的ENABLE_PREVIEWS设为YES（虽然IB的实时渲染和SwiftUI预览不是一回事，但开着能避免一些潜在问题）。

关于2017年教程过时的问题 #

从Xcode 10之后，IB对@IBDesignable的处理有一些细节变化，但核心逻辑没变，不过要注意这两个点：

• 自定义控件的初始化方法要覆盖全：IB是通过init?(coder: NSCoder)加载控件的，很多旧教程可能只在init(frame:)里写了创建子控件的逻辑，漏掉了init(coder:)里的调用，这就会导致IB里看不到子控件！一定要在两个初始化方法里都调用你的UI初始化逻辑（比如setup()方法）。
• 子控件的约束要正确：如果你的两个按钮用了Auto Layout，要确保约束是添加到自定义控件本身或者它的contentView上，而且没有约束冲突——IB渲染时遇到约束冲突，就会 fallback 显示灰色矩形。

检查教程本身的疏漏 #

你说教程里的项目也只显示矩形，大概率是教程里的代码漏了@IBDesignable标记，或者初始化逻辑不全。你可以手动给教程里的控件类加上@IBDesignable，然后重新Build，再看IB的预览效果。另外，如果教程里是在layoutSubviews()里创建子控件，要确保这个方法在IB渲染时会被触发，或者把创建逻辑移到初始化方法里。

关于“组件内按钮无法预览”的误解 #

完全不是这样！IB完全可以渲染自定义控件里的所有子控件，只要代码正确。比如你在自定义控件里添加UIButton、设置好布局，加上@IBDesignable，IB就能实时显示出来，这是IB的基本功能之一。

给你个极简测试方案 #

你可以写一个超简单的测试类验证一下：

import UIKit

@IBDesignable
class TestControl: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }
    
    private func setupUI() {
        let testButton = UIButton(type: .system)
        testButton.setTitle("Preview Test", for: .normal)
        testButton.translatesAutoresizingMaskIntoConstraints = false
        addSubview(testButton)
        
        NSLayoutConstraint.activate([
            testButton.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            testButton.centerYAnchor.constraint(equalTo: self.centerYAnchor)
        ])
    }
}

把这个类加到项目里，在IB拖一个UIView，设置Class为TestControl，Build之后看看IB里能不能显示按钮。如果能，说明你的Xcode/IB没问题，问题出在原来的代码或者教程代码里；如果还是不行，那可能是Xcode的问题，试试更新到最新版本或者重装。

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