背景

本课属于 Coddy Swift 学习旅程的“SwiftUI 入门”单元。第 15 课，共 50 课。

.background 会在视图后面绘制颜色。它会覆盖视图区域，因此添加内边距后，着色区域会比文本更大：

Text("New")
    .padding()
    .background(.red)
    .foregroundStyle(.white)

要让彩色区域的角变圆，可以使用 .clipShape 将它裁剪成指定形状。RoundedRectangle(cornerRadius: 8) 会生成圆角，Capsule() 会让两端完全变圆：

Text("Tag")
    .padding(8)
    .background(.blue)
    .clipShape(RoundedRectangle(cornerRadius: 8))

挑战

简单

把文本变成徽章：添加标准内边距、红色背景和白色文字。

亲手试试

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

SwiftUI 入门中的所有课

1简介

4修饰符

7列表

10项目：Coddy 咖啡馆

2显示内容

5状态与按钮

8导航

11最终挑战

3堆栈与布局

6用户输入

9共享数据