🔸child view

SwiftUI ⟩ view ⟩ hierarchy ⟩ child view

child view (子視圖)

• 被 container view 所包含的 view，例如： ContainerView { childView }。

• 被 view modifier 修飾的 view，例如：childView.modifier() 中的 childView。

root view 與其所含的所有子視圖 (descendants) 形成 view hierarchy。

註：在 UIKit 中通常稱為 subview。

📖 解說

在 container view 的狀況，大括號裡面的 views 就是 child views。

// 被 container view 所包含的 view
HStack {             // parent
    Text("Hello")    // child
    Color.red        // child
}

在有 view modifiers 的情況下，要倒過來看，前面的是 child view，後面的是 parent view。

// 被 view modifier 修飾的 view
view                                   // child
    .padding()                         // parent
    .frame(width: 100, height: 100)    // grand parent
    .border(.black)                    // grand grand parent

如果結合起來看：

// container view + view modifiers
HStack {             // parent
    Text("Hello")    // child
    Color.red        // child
}
.padding()                         // parent
.frame(width: 100, height: 100)    // grand parent
.border(.black)                    // grand grand parent

這時的 view hierarchy 就會變成：

// view hierarchy
border ── frame ── padding ── HStack ─┬─ Text
                                      └─ Color.red

👥 相關

• container view

📘 手冊

• SwiftUI ⟩ Layout adjustments ⟩ Laying out a simple view

⭐️ 重點

When SwiftUI renders a view hierarchy, it recursively evaluates each child view: The parent view proposes a size to the child views it contains, and the child views respond with a computed size.

When all child views have reported their size, the parent view renders them.

👉 Laying out a simple view