SwiftUI Academy · 课时

Layout 协议

实现 sizeThatFits 和 placeSubviews。

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

本课时的部分内容尚未翻译，以英文显示。

Beyond Stacks

When stacks and grids are not enough, the Layout protocol lets you write your own container that positions children exactly how you want. 🧩

Two Required Methods

Conform to Layout by implementing sizeThatFits and placeSubviews, the two steps every custom layout needs.

struct MyLayout: Layout {
    func sizeThatFits(...) -> CGSize { ... }
    func placeSubviews(...) { ... }
}

Sizing Yourself

In sizeThatFits, you measure the children and return the total size your container wants to occupy.

func sizeThatFits(proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout ()) -> CGSize {
    CGSize(width: 200, height: 100)
}

The Proposal

The ProposedViewSize is the space the parent offers. You decide how to use or shrink within it.

let width = proposal.width ?? 0

The Subviews Proxy

The subviews argument is a collection of proxies. Ask each one for its preferred size before placing it.

for view in subviews {
    let size = view.sizeThatFits(.unspecified)
}

Placing Children

In placeSubviews, you loop and call place on each subview with an exact point and an anchor.

func placeSubviews(in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout ()) {
}

The place Call

Each place call sets the origin, the anchor point, and the size proposal for that one child.

view.place(at: point,
           anchor: .topLeading,
           proposal: .unspecified)

Walk a Cursor

A simple layout keeps an x cursor, placing each child then advancing by its width plus spacing.

var x = bounds.minX
for view in subviews {
    let s = view.sizeThatFits(.unspecified)
    view.place(at: CGPoint(x: x, y: bounds.minY),
               proposal: .unspecified)
    x += s.width
}

Using Your Layout

A Layout type is used just like a stack: wrap your views in it and they get arranged by your code.

MyLayout {
    Text("One")
    Text("Two")
}

Optional Cache

The cache parameter lets you store expensive measurements between passes; use Void when you do not need it.

It Is Value-Based

Because a Layout is a struct, SwiftUI can re-run it cheaply, keeping custom containers fast and predictable. ⚡

Quick Check

Recall the two methods every Layout must implement.

Recap

You can now build a custom container with the Layout protocol by measuring in sizeThatFits and positioning in placeSubviews. 🎉

常见问题解答

「Layout 协议」课时是免费的吗？

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

「Layout 协议」这节课中我会学到什么？

实现 sizeThatFits 和 placeSubviews。你通过在浏览器中直接运行的动手代码来练习 SwiftUI Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 SwiftUI Academy 需要有经验吗？

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

「Layout 协议」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 SwiftUI Academy