SwiftUI Academy · レッスン

Spacer とレイアウト優先度

Spacer でビューを離し、サイズを制御します。

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

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

Meet Spacer

A Spacer is an invisible view that greedily expands to fill empty space inside a stack, pushing its neighbors apart.

Pushing Views Apart

Drop a Spacer between two views in an HStack and they fly to opposite ends, perfect for a label on the left and a value on the right.

HStack {
    Text("Total")
    Spacer()
    Text("$42")
}

Pushing to One Side

A single Spacer at the start shoves everything after it to the trailing edge. Place it first to right-align a row of content.

HStack {
    Spacer()
    Text("Right")
}

Centering with Two Spacers

Wrap a view in two spacers and it centers itself. Each Spacer takes an equal share of the leftover space on either side.

HStack {
    Spacer()
    Text("Center")
    Spacer()
}

Spacer in a VStack

In a VStack a Spacer pushes vertically. Put one at the bottom to pin a button to the lower edge of the screen.

VStack {
    Text("Top")
    Spacer()
}

Spacer with a Minimum Length

Give a Spacer a minLength to guarantee a gap that never collapses, even when the stack runs short on room.

HStack {
    Text("A")
    Spacer(minLength: 24)
    Text("B")
}

When Space Runs Out

When a stack is too small, SwiftUI must decide which view shrinks first. That decision is driven by each view's layout priority.

Setting Layout Priority

The layoutPriority modifier marks a view as more important. A higher number keeps its full size while lower-priority siblings shrink.

Text("Keep me full")
    .layoutPriority(1)

Protecting Important Text

When a long title and a subtitle compete, give the title higher layoutPriority so it shows fully and the subtitle truncates instead.

HStack {
    Text("Important headline").layoutPriority(1)
    Text("detail")
}

Spacer vs Priority

Remember the split: Spacer distributes leftover space, while layoutPriority decides who shrinks when there is not enough to go around.

Building a Clean Row

Combine both for tidy rows: a Spacer separates label and value, and priority ensures the key text never gets clipped.

HStack {
    Text("Username").layoutPriority(1)
    Spacer()
    Text("coddy")
}

Quick Check

One last check on space and priority.

Recap

You did it! A Spacer fills and distributes space while layoutPriority controls which views shrink first, giving you balanced, robust layouts.

よくある質問

「Spacer とレイアウト優先度」レッスンは無料ですか？

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

「Spacer とレイアウト優先度」で何を学びますか？

Spacer でビューを離し、サイズを制御します。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Spacer とレイアウト優先度」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← SwiftUI Academyに戻る