视觉编辑 SwiftUI 视图

你好 欢迎来到全球开发者大会

（视觉编辑 SwiftUI 视图） 嗨 我是 Daisy 我是 Xcode Previews team 的一员 在本视频中 我想向你们展示 如何运用 Xcode 预览 来迅速创建 SwiftUI app 无论你是否熟悉 SwiftUI 为了展示这一点 我要为我们的思慕雪 app 创建行视图 该视图包括思慕雪的名字 成分、卡路里和一张图片 还有代表受欢迎程度的星星数 首先 我会用一个资料库 为我的用户界面添加一个新的视图 资料库包含 SwiftUI 视图和修改器 使你能够保留你的预览编译 而无需做额外的修改

SwiftUI 使用结构性布局 使你的 app 具有适应性 你的 app 因此看上去非常美观 无论在 iMac 上还是 iPhone 上运行 Xcode 预览使你能够插入内容 并立刻找到适合的布局容器

接下来 我可以双击“你好 世界”的视图 来转换至编辑者视角 它使我能够快速修改视图中的关键部分 无论是一张图片还是文本 Xcode 预览 canvas 和源编辑器 紧密相连 canvas 和 inspector 使你能更快地书写 Swift 代码 且所有你对源所做的更改 都会即刻在 canvas 上显示

为了帮你更快地构建结构 你可以使用 Command-D 复制你的视图

Xcode 预览了解你的代码结构 因此若你复制一个不包含在容器中的视图 它就不会将其插入进去

接下来 我们可以双击 第三个标签来快速修改它 双击视图不仅能替换静态内容 而且让你能轻松整合你的数据模型

若要插入图片 我就要调出资料库 通过快捷键 Command-Shift-L Xcode 预览 canvas 不仅能用在 SwiftUI 视图和修改器中 也可以用于你的媒体上 让你能够轻松使用资产目录的图片

我们的图片比想象中要大 但这可以理解 因为 SwiftUI 以图片的原始尺寸 进行渲染 为了修正好 我可以使用 inspector 搜索适合的修改器 点击“添加修改器” 根据你现有的文本 来调出推荐建议列表 它让你能够快速搜索到你想查找的内容 并了解视图中常用的修改器 图片尺寸调整完毕 虽然该尺寸还未变成规格 在 inspector 中 我可以添加和编辑常用的修改器 以尝试不同的值 而无需知晓修改器的签名 这样就能够迅速更新你的代码 和 canvas 上的渲染

随后 我想添加星星视图 来代表思慕雪的受欢迎程度 使用你项目自定义的 SwiftUI 视图 和 canvas 中的修改器 就和使用资料库中的那些一样简单 想了解具体做法 请参见相关讲座 “在 Xcode 资料库中 添加个性化视图和修改器” 想要横向添加星星 Xcode 预览的相关操作 可用于将选定的图片嵌套在不同的容器中 做法是按住 Command 键并点击图片 在这里 点击 “Embed in HSTack” 可以嵌套一个水平容器 若想重复星星的视图 我们可以调出相同的菜单 并点击 “Repeat”

（芒果思慕雪） 我想让将我的思慕雪的名称显眼一些 使用 inspector 我能够在我的视图中快速试用不同的字体 以及字体粗细值 并在 canvas 中快速预览结果

这并不是我真正想要的 想要清除修改器 我可以点击 control 旁边的 蓝色圆形指示器 清除修改器 让它回到继承值 在这种情况下 字体将回到 默认的 SwiftUI 字体

随后 我想要编辑其他标签 使用inspectors 只需要点击几下即可 inspectors 不仅能用来 编辑修改器的属性 而且可以用于编辑视图

屏幕空间可以说是寸土寸金 因此 Xcode 预览所拥有的 canvas 内的 inspector 让你能够关闭测面板而不失去其功能 想要调出 canvas inspector 按住 Control-Option 并点击你想检测的视图

为了让你能在不同的配置之间进行预览 在 Xcode 12 中 我们推出了多种 以预览为重点的能力 例如 我们可以只要单击 就可以复制某个预览 且由于预览也是一种视图 我们也可以检测他们

小结一下 Xcode 预览对 SwiftUI 视图 进行视觉编辑的一些方式 是通过紧密整合源编辑器 inspector 和资料库实现的 谢谢 （2020 全球开发者大会）