# child view

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [view](https://lochiwei.gitbook.io/ios/swiftui/view) ⟩ [hierarchy](https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy) ⟩ child view

{% hint style="success" %}
*<mark style="color:purple;">**child view**</mark>* (<mark style="color:yellow;">子視圖</mark>)

* 被 [container view](https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy/container) 所包含的 view，例如： `ContainerView {`` `<mark style="color:yellow;">`childView`</mark>` ``}`。&#x20;
* 被 [view modifier](https://lochiwei.gitbook.io/ios/swiftui/view/modifier) 修飾的 view，例如：<mark style="color:yellow;">`childView`</mark>`.modifier()` 中的 `childView`。

[root view](https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy/root-view) 與其<mark style="color:yellow;">所含的所有子視圖</mark> (<mark style="color:orange;">descendants</mark>) 形成 [view hierarchy](https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy)。
{% endhint %}

{% hint style="info" %}
註：在 `UIKit` 中通常稱為 *<mark style="color:purple;">**subview**</mark>*。
{% endhint %}

{% tabs %}
{% tab title="📖 解說" %}
在 [container view](https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy/container) 的狀況，大括號裡面的 views 就是 child views。

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

在有 [view modifiers](https://lochiwei.gitbook.io/ios/swiftui/view/modifier) 的情況下，要倒過來看，前面的是 child view，後面的是 parent view。

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

如果結合起來看：

```swift
// 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 就會變成：

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

{% endtab %}

{% tab title="👥 相關" %}

* [container view](https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy/container)
  {% endtab %}

{% tab title="📘 手冊" %}

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Layout adjustments](https://developer.apple.com/documentation/swiftui/layout-adjustments) ⟩ [Laying out a simple view](https://developer.apple.com/documentation/swiftui/laying-out-a-simple-view)
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %}
When SwiftUI renders a [view hierarchy](https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy), it <mark style="color:yellow;">recursively</mark> evaluates each <mark style="color:orange;">child view</mark>: The <mark style="color:orange;">parent view</mark> <mark style="color:yellow;">proposes a size</mark> to the <mark style="color:orange;">child views</mark> it contains, and the <mark style="color:orange;">child views</mark> <mark style="color:yellow;">respond with a computed size</mark>.

When all child views have reported their size, the parent view <mark style="color:yellow;">renders</mark> them.

:point\_right: [Laying out a simple view](https://developer.apple.com/documentation/swiftui/laying-out-a-simple-view)
{% endhint %}
{% endtab %}
{% endtabs %}