内置形状
绘制 Rectangle、Circle、Capsule 和 RoundedRectangle。
内置形状 是 CoddyKit 上的免费 SwiftUI Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 SwiftUI Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 SwiftUI Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Shapes Are Views
SwiftUI gives you ready-made shapes you can drop in like any view. They draw themselves and fill the space you give them. 🔷
The Rectangle
A Rectangle is the simplest shape: a plain box. It expands to fill whatever frame or container holds it.
Rectangle()
.fill(.blue)
.frame(width: 120, height: 60)The Circle
A Circle always draws a perfect round shape inside its frame. Give it a square frame for a clean, even circle.
Circle()
.fill(.green)
.frame(width: 80, height: 80)The Capsule
A Capsule is a pill shape with fully rounded ends. It is the go-to look for tags, chips, and buttons.
Capsule()
.fill(.orange)
.frame(width: 120, height: 44)RoundedRectangle
A RoundedRectangle is a box with softened corners. Set its corner radius to control how round those corners look.
RoundedRectangle(cornerRadius: 16)
.fill(.purple)Filling a Shape
Use fill to paint a shape with a solid color or even a gradient. Without a fill, a shape draws in the default style.
Circle()
.fill(Color.pink.gradient)Sizing with frame
Shapes have no natural size, so wrap them in a frame to set width and height. The shape grows to fit it.
Rectangle()
.frame(width: 100, height: 100)Ellipse for Ovals
An Ellipse stretches a circle to match its frame. In a wide frame it becomes a smooth oval rather than a round circle.
Ellipse()
.fill(.teal)
.frame(width: 140, height: 70)Shapes as Backgrounds
Place a shape behind content with the background modifier to build cards and badges. Content sits neatly on top.
Text("New")
.padding(8)
.background(Capsule().fill(.red))Clipping to a Shape
Use clipShape to crop an image or view into a shape. A square photo becomes a perfect round avatar.
Image("avatar")
.clipShape(Circle())Shapes Build UI
Combined with fills and frames, these shapes become buttons, cards, badges, and avatars. They are your visual toolkit. ✨
Quick Check
You want a pill-shaped tag with fully rounded ends. Which shape fits best?
Recap: Built-in Shapes
You can now draw Rectangle, Circle, Capsule, RoundedRectangle, and Ellipse, then fill and size them. Great progress!
常见问题解答
「内置形状」课时是免费的吗？
是的 — 「内置形状」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 SwiftUI Academy 课程的其余内容，请升级到 CoddyKit PRO。 SwiftUI Academy 课程共包含 4 节课。
「内置形状」这节课中我会学到什么？
绘制 Rectangle、Circle、Capsule 和 RoundedRectangle。 你通过在浏览器中直接运行的动手代码来练习 SwiftUI Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 SwiftUI Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 SwiftUI Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「内置形状」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 SwiftUI Academy 课中编写并运行代码吗？
能。每节 SwiftUI Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。