Visually edit SwiftUI views

Highlight

Xcode Previews 在 Xcode 12 中把 SwiftUI canvas、源码编辑器、Library 和 Inspector 连在一起，让开发者能直接在预览里插入视图、嵌入容器、重复组件、调整 modifier，并立即看到源码和界面的同步结果。

---

核心内容

SwiftUI 的一个承诺，是界面结构直接写在代码里。这个承诺也带来一个现实问题：当你只想做一个列表行，仍然要在脑中模拟 HStack、图片尺寸、文字样式和重复图标的关系。写一行代码、刷新一次预览、再猜下一步，节奏很容易断。

这场 session 用一个 smoothie app 的 row view 展示 Xcode Previews 的解法。这个 row 需要名称、配料、卡路里、图片和表示受欢迎程度的星标。Daisy 选择先从 Library 插入 SwiftUI 视图，再让 canvas 自动处理合适的布局容器。

变化发生在 canvas 和源码之间。双击预览里的文字，焦点会回到编辑器里对应的内容；用 Command-D 复制视图时，Xcode 能识别当前结构，必要时自动补上容器；用 Inspector 调整图片和字体时，代码会同步更新，canvas 也会立刻重新渲染。

这个流程的价值不在于替代代码。它让最容易反复试错的部分变短：先在 canvas 里把结构、素材、重复元素和 modifier 调到接近目标，再回到 Swift 代码里整理命名、模型数据和复用边界。对于 SwiftUI 新手，它降低了起步门槛；对于熟悉 SwiftUI 的开发者，它减少了在 modifier 签名和布局容器之间来回查文档的时间。

详细内容

本 session 的 Code snippets 和 Resources 均为 0。下面使用 text 块记录 transcript 中演示过的 Xcode Previews 工作流，不伪造 Swift 代码或 API 签名。

1. 从 Library 插入视图，并让 Xcode 补齐布局容器

（00:30）Daisy 从 Library 添加一个新视图。Library 里有 SwiftUI views 和 modifiers，目的是让 preview 在继续编译的状态下逐步搭界面。SwiftUI 使用结构化布局，Xcode Previews 可以在插入内容时同时给出合适的布局容器。

打开 SwiftUI preview canvas
从 Library 选择 SwiftUI view 或 modifier
把内容插入到当前 row view
让 Xcode Previews 在同一次操作中补上合适的 layout container
双击 "Hello World" 文本，把焦点切到源码里的对应位置
替换成 smoothie 的名称、配料或卡路里文本

关键点：

• Library 会配合当前 SwiftUI 结构插入内容，作用不止是列出组件。
• transcript 明确提到 Xcode Previews 可以在一次操作里插入内容并获得正确 layout container。
• 双击 canvas 中的静态文本会把编辑焦点带到源码，适合快速替换 label 的核心内容。
• 这个步骤适合先搭出 row view 的骨架，再处理图片、星标和 modifier。

2. 用 Command-D 复制视图，并把静态文本换成模型数据

（01:25）构建 row view 时，经常需要连续几个 label。Xcode Previews 提供 Command-D 复制操作，并且理解 SwiftUI 代码结构。如果被复制的 view 还没有位于容器中，Xcode 会自动插入容器。

选中已有 Text view
按 Command-D 复制
如果当前 view 不在容器里，让 Xcode 自动插入容器
双击第三个 label
把静态内容替换为模型数据字段
在 canvas 里确认名称、配料、卡路里三段文本的排列关系

关键点：

• Command-D 对应 transcript 中的快速复制视图操作。
• 自动插入容器这一步来自 Xcode 对 SwiftUI 结构的理解，不需要先手写完整布局。
• 双击 label 既能替换静态内容，也能把文本接到模型数据上。
• 对列表行、设置页、详情卡片这类重复文本结构，先复制再替换数据比从零插入更快。

3. 从 Asset Catalog 插入图片，并用 Inspector 调整 modifier

（01:56）图片通过 Command-Shift-L 打开 Library 插入。Xcode Previews canvas 不只处理 SwiftUI views 和 modifiers，也能使用项目 Asset Catalog 里的 media。演示中，图片插入后尺寸过大，因为 SwiftUI 会按图片真实尺寸渲染。

按 Command-Shift-L 打开 Library
从 Asset Catalog 选择 smoothie 图片
插入到 row view
发现图片按真实尺寸显示，超出预期
打开 Inspector 的 Add Modifier
根据当前 Image 上下文选择推荐的 resizing 相关 modifier
在 Inspector 里调整常见 modifier 的值
观察代码和 canvas 同步更新

关键点：

• Command-Shift-L 是 transcript 中打开 Library 的快捷键。
• 图片尺寸异常的原因是 SwiftUI 按图片真实尺寸渲染。
• Inspector 的 Add Modifier 会根据当前上下文给出推荐项，适合查找常用 modifier。
• transcript 只说图片开始 resizing，未给出具体 API 签名，所以这里不写 Swift 代码。
• Inspector 修改值后会立即更新源码并重新渲染 canvas，适合快速试尺寸。

4. 嵌入 HStack，并用 Repeat 做出星标数量

（02:51）row view 还需要一个显示受欢迎程度的 star view。Xcode Previews canvas 可以使用项目自己的 SwiftUI views 和 modifiers，操作方式和系统 Library 中的内容一致。更多自定义 Library 内容的细节，session 指向了 “Add custom views and modifiers to the Xcode Library”。

把项目中的 star view 插入到 row view
按住 Command 并点击 star view
在菜单中选择 Embed in HStack
再次打开同一菜单
选择 Repeat
把单个 star view 横向重复成 popularity indicator

关键点：

• 自定义 SwiftUI view 可以像系统 view 一样出现在 canvas 操作流里。
• Command-click 菜单提供容器相关 action，transcript 中的例子是 Embed in HStack。
• Repeat action 用来把单个 star view 扩展成横向重复元素。
• 这一步适合评分、分页点、状态图标、标签组等重复 UI。

5. 用 Inspector 尝试字体、权重，并清除不合适的 modifier

（03:30）标题需要更醒目时，Inspector 可以直接试字体和 weight 的不同值。演示里，尝试后的效果不符合预期，Daisy 点击控件旁边的蓝色圆形指示器清除 modifier，让字体回到继承值。

选中 smoothie title
在 Inspector 中尝试 font 和 weight
观察 canvas 里的标题变化
如果效果不合适，点击控件旁的蓝色圆形指示器
清除该 modifier
让字体回到默认 SwiftUI font
继续调整其他 label 的 view 属性和 modifier 属性

关键点：

• Inspector 可以编辑 modifier 的属性，也可以编辑 view 自身的属性。
• 清除 modifier 会回到继承值，避免为了试错留下多余样式。
• 这个流程适合字体、粗细、图片尺寸这类需要视觉判断的参数。
• 回到默认值后，源码也更干净，后续手写整理成本更低。

6. 使用 in-canvas Inspector，并复制 preview 配置

（04:12）屏幕空间有限时，可以关闭侧边栏，改用 in-canvas Inspector。Control-Option 点击目标 view，就能在 canvas 内检查和编辑。Xcode 12 还加入了面向 preview 的能力，例如一键复制 preview；由于 preview 本身也是 view，它们也能被 Inspector 检查。

关闭侧边 Inspector，释放编辑区域
按住 Control-Option 并点击要检查的 view
在 canvas 内直接打开 Inspector
复制当前 preview
为副本切换另一种配置
检查 row view 在不同 preview 配置下的表现

关键点：

• Control-Option click 是 transcript 中打开 in-canvas Inspector 的方式。
• in-canvas Inspector 适合小屏幕或并排查看源码时使用。
• 一键复制 preview 可以把同一个 row view 放到多个配置下比较。
• metadata 明确提到 light/dark mode 和 Dynamic Type，这些配置适合通过复制 preview 做回归检查。

核心启发

• 做什么：把 App 里最常见的列表行做成可视化迭代样板。 为什么值得做：本 session 的 smoothie row 同时包含文本、图片和星标，正好覆盖很多内容型 App 的列表单元。 怎么开始：挑一个真实列表行，在 canvas 中用 Library 插入文本和图片，用 Command-D 复制 label，再用 Inspector 调整图片尺寸和标题样式。

• 做什么：为评分、进度、状态徽章这类重复 UI 建一个可复用小组件。 为什么值得做：session 演示了把单个 star view 嵌入 HStack 后用 Repeat 做横向重复，适合把重复图形从业务视图里拆出来。 怎么开始：先在现有 row view 中插入一个自定义 view，Command-click 选择 Embed in HStack，再用 Repeat 扩展数量；稳定后再看 10649 把它加入 Xcode Library。

• 做什么：建立一组预览配置，专门检查深色模式和 Dynamic Type。 为什么值得做：metadata 明确提到 Xcode Previews 可以查看 light/dark mode 和 accessibility features。布局问题通常在这些配置下暴露得最快。 怎么开始：复制当前 preview，为每个副本设置一种环境配置；在 canvas 中同时观察标题、图片和配料文本是否换行、截断或挤压。

• 做什么：把视觉试错集中放到 Inspector，完成后再回源码整理。 为什么值得做：session 展示了 Inspector 可以添加推荐 modifier、编辑常见值、清除不合适的 modifier，适合处理字体、weight、图片尺寸这类视觉参数。 怎么开始：选中目标 view，先用 Inspector 找到合适的 modifier和值；如果试错结果不对，用蓝色指示器清除，再保留最终真正需要的改动。

• 做什么：给团队约定一条 SwiftUI row view 的构建顺序。 为什么值得做：Library、Command-D、Inspector、HStack、Repeat、in-canvas Inspector 串起来后，可以形成稳定的多人协作流程，减少每个人从空文件摸索布局的时间。 怎么开始：在项目文档里写一段短流程：先用 Library 放结构，再复制文本，再接素材，再用 Inspector 调 modifier，最后复制 preview 做配置检查。

关联 Session

• Structure your app for SwiftUI previews — 继续学习如何为 preview 准备输入、样本数据和状态，解决复杂 view 无法稳定预览的问题。
• Add custom views and modifiers to the Xcode Library — 本 session 在 star view 处点名推荐，讲如何把自定义 SwiftUI view 和 modifier 放进 Xcode Library。
• Introduction to SwiftUI — 从声明式视图、轻量 view 和数据驱动界面入门，补足 SwiftUI 基础。
• What’s new in SwiftUI — 了解 2020 年 SwiftUI app、scene、控件、widget 和跨平台能力的总览。
• Stacks, Grids, and Outlines in SwiftUI — 深入布局容器与列表结构，适合继续完善本 session 中的 smoothie row。