# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/ios/swiftui/view/hierarchy/child.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.