视图修饰器:串联与自定义修饰器
应用内置修饰器,并创建可复用的 ViewModifier 类型。
视图修饰器:串联与自定义修饰器 是 CoddyKit 上的免费 Swift Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Swift Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。
欢迎
View 修饰器可以转换 View,改变字体、颜色、内边距、动画等。您可以将它们串联起来,也可以创建可复用的自定义修饰器。
内置修饰器
```swift
Text("Hello")
.font(.title)
.foregroundColor(.blue)
.padding()
.background(Color.yellow)
.cornerRadius(8)
```
修饰器链的顺序很重要
```swift
Text("Hi")
.padding()
.background(Color.red) // red covers padding area
Text("Hi")
.background(Color.red) // red only covers text
.padding()
```
自定义 ViewModifier
```swift
struct CardStyle: ViewModifier {
func body(content: Content) -> some View {
content
.padding()
.background(Color.white)
.cornerRadius(10)
.shadow(radius: 4)
}
}
extension View {
func cardStyle() -> some View { modifier(CardStyle()) }
}
Text("Card").cardStyle()
```
条件修饰器
```swift
Text("Status")
.foregroundColor(isError ? .red : .primary)
// Or with .modifier:
text.modifier(isLarge ? LargeStyle() : SmallStyle())
```
环境修饰器
有些修饰器会向下传递给后代 View:
```swift
VStack {
Text("One")
Text("Two")
}
.font(.headline) // applies to ALL Text children
```
参数化修饰器
```swift
struct Bordered: ViewModifier {
var color: Color
func body(content: Content) -> some View {
content.overlay(RoundedRectangle(cornerRadius:8).stroke(color,lineWidth:2))
}
}
Text("Hi").modifier(Bordered(color:.blue))
```
过渡修饰器
```swift
if show {
Text("Appeared")
.transition(.slide) // custom appear/disappear animation
}
```
.onAppear 与 .onDisappear
```swift
Text("Hello")
.onAppear { print("Appeared") }
.onDisappear { print("Disappeared") }
```
无障碍修饰器
```swift
Image("logo")
.accessibilityLabel("Company Logo")
.accessibilityAddTraits(.isImage)
```
快速检查
自定义 View 修饰器必须遵循哪个协议?
回顾
主要要点:
• 串联修饰器来组合外观
• 顺序很重要——每个修饰器都会包装前一个结果
• 使用 `ViewModifier` 协议创建可复用的修饰器
• 环境修饰器会传递给子 View
• 扩展 `View`,方便在调用位置使用 `.myModifier()`
接下来学习:预览。
常见问题解答
「视图修饰器:串联与自定义修饰器」课时是免费的吗?
是的 — 「视图修饰器:串联与自定义修饰器」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Swift Academy 课程的其余内容,请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。
「视图修饰器:串联与自定义修饰器」这节课中我会学到什么?
应用内置修饰器,并创建可复用的 ViewModifier 类型。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Swift Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。
「视图修饰器:串联与自定义修饰器」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 Swift Academy 课中编写并运行代码吗?
能。每节 Swift Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- View 协议与 body 属性
- @State:视图中的本地可变状态
- 视图修饰器:串联与自定义修饰器
- 预览与 Preview Provider