SwiftUI Academy · レッスン

Stroke、Fill、overlay

シェイプの輪郭と塗りつぶしを設定して、バッジやカードを作成します。

「Stroke、Fill、overlay」はCoddyKit上の無料SwiftUI Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Fill vs Stroke

A shape can be painted inside with fill or outlined with stroke. Together they let you build badges and cards.

Filling a Shape

Use fill to paint the whole inside of a shape with a color or gradient. It is the most common way to color a shape. 🎨

Circle()
    .fill(.blue)

Outlining with stroke

The stroke modifier draws only the border of a shape, leaving the center empty. Perfect for hollow rings and outlines.

Circle()
    .stroke(.blue)

Controlling Line Width

Pass a lineWidth to stroke to make the outline thicker or thinner. A larger number gives a bolder border.

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

Dashed Borders

Use a StrokeStyle with a dash pattern for dashed outlines. Great for placeholders and drop zones in your UI.

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

Fill and Stroke Together

Want both a fill and a border? Use fill with a stroke argument to paint inside and outline in one call.

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

Meet the overlay

The overlay modifier layers a view on top of another. Use it to add a border, badge, or icon over existing content.

Borders via overlay

A classic trick: fill a shape, then add a stroked copy with overlay. You get a clean filled card with a crisp border.

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

Overlaying an Icon

You can overlay any view, not just shapes. Drop a small badge or icon onto a card to highlight new or important items.

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

overlay vs background

Remember the layers: overlay sits on top of a view, while background sits behind it. Pick by which side you want the decoration.

Building a Badge

Combine fill, stroke, and overlay to craft polished badges, avatars, and cards. These three tools cover most decoration. ✨

Quick Check

You want to layer a stroked border on top of a filled shape. Which modifier places a view on top?

Recap: Stroke, Fill & overlay

You learned to paint shapes with fill, outline them with stroke, and layer extras with overlay. You can now build real badges and cards!

よくある質問

「Stroke、Fill、overlay」レッスンは無料ですか？

はい。「Stroke、Fill、overlay」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。

「Stroke、Fill、overlay」で何を学びますか？

シェイプの輪郭と塗りつぶしを設定して、バッジやカードを作成します。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

SwiftUI Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Stroke、Fill、overlay」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwiftUI Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← SwiftUI Academyに戻る