文章

使用 SwiftUI 创建 App 界面

在 SwiftUI 中借助让代码和布局保持同步的交互式预览开发 App。

概览

如果你选择使用 SwiftUI 框架开发 App,则可以在布置用户界面时看到一个交互式预览。Xcode 会使你对源代码、用户界面布局和检查器所做的更改保持同步。例如,你在检查器中编辑属性时,Xcode 会将对应的代码添加到源文件中。

显示 SwiftUI 预览

要显示预览,请在项目导航器中选择一个使用 SwiftUI 的文件,再选取“Editor”(编辑器) >“Canvas”(画布)。然后,点按画布右上角的“Resume”(恢复) 按钮以启动预览。Xcode 会构建和运行代码,并直接在画布中显示结果。

截屏中显示了已在项目导航器中选择了一个 SwiftUI 文件并且编辑器区域中显示了预览。

使用预览底部的控件可以在画布中的模拟设备上运行 App (可带有或不带调试会话) 或在连接的设备上运行 App。

添加视图和修饰符

要为你的 App 添加视图和修饰符,请点按工具栏中的“Library”(资源库) 按钮 (+) 以打开资源库,然后将资源库中的用户界面元素拖入画布或源代码中。不论你将元素拖到哪里,Xcode 都会使源代码和布局保持同步。

截屏中显示了已选中某个 SwiftUI 元素时的资源库。

编辑用户界面元素

使用“Action”(操作) 菜单或检查器来编辑界面元素,或者通过在源代码编辑器中输入代码来编辑。按住 Command 键点按画布中的元素或代码中的结构,从“Action”(操作) 菜单中选取“Show SwiftUI Inspector”(显示 SwiftUI 检查器),然后在下一个面板中更改属性。另外,也可以选取“View”(显示) >“Inspectors”(检查器) >“Show Attributes Inspector”(显示属性检查器),并在右侧出现的属性检查器中更改属性。

截屏中显示了画布中的“Action”(操作) 菜单,其中的“Show Attributes Inspector”(显示属性检查器) 菜单项处于选中状态。

嵌入用户界面元素

此外,你可以通过在其他结构中嵌入元素来修改用户界面。按住 Command 键点按源代码或画布中的某个元素,然后从弹出式菜单中选取“Embed in [Generic Structure]”(嵌入 [通用结构]) 操作。例如,选取“Embed in HStack”(嵌入 HStack) 可以嵌入一个在水平直线上排列视图子项的元素。

截屏中显示了源代码中的 “Action”(操作) 菜单,其中的“Embed in HStack”(嵌入 HStack) 菜单项处于选中状态。

要进一步了解 SwiftUI,请参阅“学习使用 SwiftUI 打造 App (英文)”。

另请参阅

界面

在你的界面中支持深色模式

更新颜色、图像和行为,让你的 App 在深色模式激活时自动进行调整。

为你的 App 创建自定符号图像

创建符号图像,丰富由 SF Symbols 提供的图标。