View 协议与 body 属性
了解 SwiftUI View 的构成,以及 body 如何定义用户界面层级。
View 协议与 body 属性 是 CoddyKit 上的免费 Swift Academy 课时。 这是第 1 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Swift Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。
欢迎
SwiftUI 是一种声明式用户界面框架。每个视觉元素都是一个 `View`——一种轻量级值类型,其 `body` 属性描述用户界面。
View 协议
```swift
protocol View { associatedtype Body: View; var body: Body { get } }
```
要遵循 `View`,必须实现一个计算属性 `body`,并让它返回另一个 `View`。
你好,世界
```swift
struct ContentView: View {
var body: some View {
Text("Hello, SwiftUI!")
}
}
```
不透明返回类型:some View
`some View` 会对调用者隐藏具体的返回类型,同时为编译器保留该类型——这是必要的,因为 `body` 可以返回复杂的嵌套 View 树。
组合 View
```swift
struct ContentView: View {
var body: some View {
VStack {
Text("Title").font(.title)
Text("Subtitle").foregroundColor(.gray)
}
}
}
```
View 的标识与生命周期
SwiftUI 使用 View 的类型及其在层次结构中的位置来确定标识——标识发生变化时,View 会被重新创建;标识保持稳定时,只会重新计算 body。
子视图
提取可复用的部分:
```swift
struct Header: View {
var title: String
var body: some View { Text(title).font(.largeTitle) }
}
```
绘制基本图形
内置 View 类型:
• `Text`、`Image`、`Button`、`Label`
• `Rectangle`、`Circle`、`Ellipse`
• `Color`、`Spacer`、`Divider`
容器 View
容器 View 负责管理布局:
• `VStack`、`HStack`、`ZStack`
• `List`、`ScrollView`、`LazyVStack`
• `Group`、`Section`
View 是结构体——开销很低
SwiftUI 的 View 是值类型,会在每次渲染时重新创建。`body` 的计算开销很低——实际渲染由底层渲染引擎处理,渲染引擎会对 View 进行差异比较。
快速检查
`View` 协议要求实现哪个属性?
回顾
主要要点:
• `View` 协议要求实现 `body: some View`
• 结构体开销很低——会频繁重新创建
• `some View` 隐藏复杂的返回类型
• 提取子视图以便复用
• SwiftUI 使用类型和位置确定 View 的标识
接下来学习:@State。
常见问题解答
「View 协议与 body 属性」课时是免费的吗?
是的 — 「View 协议与 body 属性」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Swift Academy 课程的其余内容,请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。
「View 协议与 body 属性」这节课中我会学到什么?
了解 SwiftUI View 的构成,以及 body 如何定义用户界面层级。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Swift Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 1 节课,共 4 节。
「View 协议与 body 属性」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 Swift Academy 课中编写并运行代码吗?
能。每节 Swift Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- View 协议与 body 属性
- @State:视图中的本地可变状态
- 视图修饰器:串联与自定义修饰器
- 预览与 Preview Provider