PricingLoginStart free
SwiftUI Academy · 课时

描边、填充与 overlay

为徽章和卡片描边并填充形状。

第 4 / 4 课13 个步骤

描边、填充与 overlay 是 CoddyKit 上的免费 SwiftUI Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 SwiftUI Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 SwiftUI Academy 课程共包含 4 节课。

填充与描边

形状可以使用 fill 填充内部，也可以使用 stroke 绘制轮廓。结合使用它们，您就能构建徽章和卡片。

填充形状

使用 fill 可以用颜色或渐变填满形状内部。这是为形状上色最常用的方法。🎨

Circle()
    .fill(.blue)

使用 stroke 绘制轮廓

stroke 修饰符只绘制形状的边框，使中心保持空白。它非常适合制作空心圆环和轮廓。

Circle()
    .stroke(.blue)

控制线条宽度

向 stroke 传入 lineWidth，即可让轮廓变粗或变细。数值越大，边框就越醒目。

Circle()
    .stroke(.blue, lineWidth: 4)

虚线边框

使用带有虚线图案的 StrokeStyle 来绘制虚线轮廓。它非常适合用于界面中的占位区域和放置区域。

RoundedRectangle(cornerRadius: 12)
    .stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))

同时使用填充和描边

想同时添加填充和边框？在 fill 中传入 stroke 参数，即可一次调用完成内部填充和轮廓绘制。

Circle()
    .fill(.yellow)
    .stroke(.orange, lineWidth: 3)

认识 overlay

overlay 修饰符会将一个视图叠加到另一个视图之上。您可以用它在现有内容上添加边框、徽章或图标。

通过 overlay 添加边框

一种经典做法是：先填充形状，再使用 overlay 添加一个带描边的副本。这样就能得到带清晰边框的整洁填充卡片。

RoundedRectangle(cornerRadius: 12)
    .fill(.white)
    .overlay(
        RoundedRectangle(cornerRadius: 12)
            .stroke(.gray, lineWidth: 1))

叠加图标

您可以叠加任意视图，而不只是形状。在卡片上放置小徽章或图标，即可突出显示新内容或重要项目。

Circle()
    .fill(.blue)
    .overlay(Text("3").foregroundStyle(.white))

overlay 与 background

请记住它们的层次关系：overlay 位于视图上方，而 background 位于视图后方。根据装饰所需的位置来选择。

构建徽章

结合 fill、stroke 和 overlay，即可制作精致的徽章、头像和卡片。这三种工具可以满足大多数装饰需求。✨

快速检查

您想在填充形状上方叠加一个描边边框。哪个修饰符可以将视图放到上方？

在交互式课程中回答

回顾：描边、填充与 overlay

您已经学会使用 fill 填充形状、使用 stroke 绘制轮廓，以及使用 overlay 叠加额外内容。现在您可以构建真正的徽章和卡片了！

免费开始

用 AI 导师学习 Swift — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
30
课程
120
免费开始学习查看完整课程

常见问题解答

「描边、填充与 overlay」课时是免费的吗？

是的 — 「描边、填充与 overlay」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 SwiftUI Academy 课程的其余内容，请升级到 CoddyKit PRO。 SwiftUI Academy 课程共包含 4 节课。

「描边、填充与 overlay」这节课中我会学到什么？

为徽章和卡片描边并填充形状。 你通过在浏览器中直接运行的动手代码来练习 SwiftUI Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 SwiftUI Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 SwiftUI Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「描边、填充与 overlay」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 SwiftUI Academy 课中编写并运行代码吗？

能。每节 SwiftUI Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Color 类型与资源颜色
  2. 线性、径向与角度渐变
  3. 内置形状
  4. 描边、填充与 overlay
← 返回 SwiftUI Academy