SwiftUI Academy · 课时

Spacer 与布局优先级

使用 Spacer 拉开视图之间的距离，并控制尺寸。

Spacer 与布局优先级 是 CoddyKit 上的免费 SwiftUI Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 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 与布局优先级」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 SwiftUI Academy 课程的其余内容，请升级到 CoddyKit PRO。 SwiftUI Academy 课程共包含 4 节课。

「Spacer 与布局优先级」这节课中我会学到什么？

使用 Spacer 拉开视图之间的距离，并控制尺寸。你通过在浏览器中直接运行的动手代码来练习 SwiftUI Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 SwiftUI Academy 需要有经验吗？

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

「Spacer 与布局优先级」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 SwiftUI Academy