🔰view hierarchy

SwiftUI ⟩ view ⟩ hierarchy

view hierarchy (視圖層級)

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

🔴 主題

• view hierarchy

  • root view：視圖層級的最上層

  • parent view：視圖層級的上層

  • child view：視圖層級的下層

• view layout

  • container view

  • composed view

  • destination view

📖 解說

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

// case: container view
HStack {             // parent
    Text("Hello")    // child
    Color.red        // child
}

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

// case: view modifiers
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

👥 相關

• Use a WindowGroup as a container for a view hierarchy that your app presents.

• 在 view hierarchy 中，一個 view 前面的 view，稱為前景 (foreground)。

• view size：parent view proposes a size to the child views it contains, and the child views respond with a computed size.

⭐️ 重點

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