Add custom views and modifiers to the Xcode Library
Developer Tools 入门 12m

将自定义视图和修饰符添加到 Xcode 库

Add custom views and modifiers to the Xcode Library

2020年6月24日

在 Apple 官方观看视频

一句话判断

Xcode 12 的 Library 现在可以展示你项目中的自定义 SwiftUI View 和 ViewModifier 了——加个 @LibraryContentProvider 注解，你的组件就出现在 Xcode 的拖拽面板里，团队协作时省去大量「你这个组件在哪」的沟通成本。

这场 Session 讲了什么

Xcode 12 引入了 LibraryContentProvider 协议，允许开发者将自定义的 SwiftUI View、ViewModifier 注册到 Xcode 的组件库（Library）中。这意味着在 Xcode 的 Canvas 面板里，不仅能看到系统提供的 Button、Text 等组件，还能看到你自己项目里封装的组件。

Session 演示了如何用 @LibraryContentProvider 标记 extension，将自定义 View 以带有预览缩略图的形式注册到 Library。你可以为每个组件提供默认参数、占位内容和使用说明，让团队其他成员在拖拽使用时一目了然。

这是 SwiftUI 开发工作流的重要补充——以前自定义组件只能在代码里手写，现在可以像系统组件一样可视化选择和拖入。

值得深挖的点

LibraryContentProvider 的注册机制

注册自定义组件不是全局的，而是基于 extension 的。你在自定义 View 的文件中添加一个 LibraryContentProvider extension，Xcode 会自动扫描并收录。每个 provider 返回一个 LibraryItem 数组，每个 item 包含组件的构造方法、预览内容和分类信息。分类可以是现有的（Controls、Layout 等），也可以自定义新分类。

预览内容的设计考量

LibraryItem 的 preview 参数决定了在 Library 面板中显示的缩略图。Session 建议提供有意义的默认值——如果你的组件是「用户头像」，预览中就放一个占位头像而不是空白。这样别人在 Library 中浏览时能立刻理解组件的用途。

代码片段

import SwiftUI

// 自定义组件
struct RoundedButton: View {
    let title: String
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .font(.headline)
                .foregroundColor(.white)
                .padding(.horizontal, 24)
                .padding(.vertical, 12)
                .background(Color.blue)
                .cornerRadius(12)
        }
    }
}

// 注册到 Xcode Library
struct RoundedButtonLibraryContent: LibraryContentProvider {
    @LibraryContentProvider
    var views: [LibraryItem] {
        LibraryItem(
            RoundedButton(title: "按钮", action: {}),
            title: "圆角按钮",
            category: .control
        )
    }
}
// 注册自定义 ViewModifier
struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.white)
            .cornerRadius(16)
            .shadow(color: .black.opacity(0.1), radius: 8, y: 4)
    }
}

struct CardModifierLibraryContent: LibraryContentProvider {
    @LibraryContentProvider
    var modifiers: [LibraryItem] {
        LibraryItem(
            CardModifier(),
            title: "卡片样式",
            category: .effect
        )
    }
}

最佳实践

  1. 给每个公共组件都加 Library 注册。团队项目中有大量可复用组件时，Library 是最自然的发现入口。不要让组件藏在文件夹深处等人来翻。
  2. 预览内容要有代表性。不要用空字符串或零值作为预览——预览是其他人理解组件用途的第一印象。用真实的、有意义的默认数据。
  3. 利用 category 做好分类。如果你有大量组件，建议自定义分类名称（用 LibraryItem.Category 的自定义值），不要全堆在同一个分类下面。

还有什么值得关注

  • Library 中注册的组件支持 Xcode 的代码补全，输入组件名时会有自动补全建议。
  • Xcode 12 的 Library 面板支持搜索功能，所以给组件起一个好名字很重要——越容易搜索到越好。
  • 这个功能目前仅支持 SwiftUI，UIKit 的自定义组件还不支持注册到 Library。
WWDC 2020