🔰view hierarchy

SwiftUI ⟩ view ⟩ hierarchy

view hierarchy (視圖層級)

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

view hierarchy
- root view：視圖層級的最上層
- parent view：視圖層級的上層
- child view：視圖層級的下層
view layout

在 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

Previousviews Nextcontainer view

Last updated 1 year ago