#  GeometryReader

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [views](https://lochiwei.gitbook.io/ios/swiftui/view) ⟩ [measuring](https://lochiwei.gitbook.io/ios/swiftui/view/measure) ⟩ GeometryReader 

{% hint style="info" %}
⭐️ <mark style="color:purple;">**`GeometryReader`**</mark>：

* 會<mark style="color:yellow;">讀取</mark><mark style="color:orange;">母視圖</mark>的<mark style="color:yellow;">位置尺寸</mark>資訊。
* 會<mark style="color:yellow;">取用</mark><mark style="color:orange;">母視圖</mark>的<mark style="color:yellow;">所有空間</mark>。
* 負責<mark style="color:yellow;">對齊</mark><mark style="color:orange;">子視圖</mark><mark style="color:yellow;">於</mark><mark style="color:red;">左上角</mark>❗️ (⭐️) :point\_right: [geometryreader-de-dui-qi-fang-shi](https://lochiwei.gitbook.io/ios/swiftui/view/measure/geometryreader/geometryreader-de-dui-qi-fang-shi "mention")
  {% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* [geometryreader-de-dui-qi-fang-shi](https://lochiwei.gitbook.io/ios/swiftui/view/measure/geometryreader/geometryreader-de-dui-qi-fang-shi "mention")
  {% endtab %}

{% tab title="💾 程式" %}
{% tabs %}
{% tab title="📖 解說" %}
當需要知道某視圖的<mark style="color:yellow;">動態尺寸</mark>時，可搭配 <mark style="color:orange;">`.overlay`</mark> 或 [`.background`](https://lochiwei.gitbook.io/ios/swiftui/view/drawing/background/.background) 使用，例如：

```swift
// view > overlay > GeometryReader
view.overlay {                             // overlay.frame = view.frame
    // ⭐️ GeometryReader 知道 view 的尺寸（透過 `geo.size`）
    GeometryReader { geo in 
        // geo.size              ：paraent's size
        // geo.frame(in: .global)：parent's bounds
    }
}
```

{% hint style="info" %}
:bulb: 註：上面程式碼中，<mark style="color:purple;">**`GeometryReader`**</mark> 的<mark style="color:orange;">母視圖</mark>其實是 <mark style="color:blue;">`view.overlay`</mark>，不過 <mark style="color:blue;">`view.overlay`</mark> 的 <mark style="color:orange;">`frame`</mark> 與 <mark style="color:blue;">`view`</mark> 的一樣❗️&#x20;
{% endhint %}
{% endtab %}

{% tab title="💈 範例" %}

* [🌅 Underline](https://lochiwei.gitbook.io/ios/swiftui/view/state/value/state/underline)
* [🌅 CircleText](https://lochiwei.gitbook.io/ios/master/todo/exercises/circletext)
* [🌅 對齊欄位](https://lochiwei.gitbook.io/ios/swiftui/data-flow/preferences/examples/same-width)
  {% endtab %}
  {% endtabs %}
  {% endtab %}

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

* often used to do custom [layout](https://lochiwei.gitbook.io/ios/swiftui/view/layout "mention").
* used to solve the [problem-with-.readsize](https://lochiwei.gitbook.io/ios/swiftui/view/layout/grids/examples/problem-with-.readsize "mention").
* used by [.getsize](https://lochiwei.gitbook.io/ios/swiftui/view/view/.getsize "mention") to do something with view's size.
* [📦 GeometryProxy](https://lochiwei.gitbook.io/ios/swiftui/view/measure/geometryproxy)
* [🌀 GeometryProxy](https://lochiwei.gitbook.io/ios/swiftui/view/measure/geometryproxy/geometryproxy)
* [🌀View + report(width: key)](https://lochiwei.gitbook.io/ios/swiftui/data-flow/preferences/examples/same-width/view+pref)
* [Anchor Preferences](https://lochiwei.gitbook.io/ios/swiftui/data-flow/preferences/anchor-preferences)\
  Using the subscript, you can get the size and position of any subview down the view tree.
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
用法：

```swift
GeometryReader { geometry in
    // geometry.size：size of the paraent
    // geometry.frame(in: .global)：bounds of the parent
}
```

{% endhint %}

{% hint style="info" %}

* A **GeometryReader** is configured with a [ViewBuilder](https://lochiwei.gitbook.io/ios/swiftui/view/view-builder) (just like any other container view), but unlike other containers, the view builder for a geometry reader receives a <mark style="color:red;">**parameter**</mark>: the [GeometryProxy](https://lochiwei.gitbook.io/ios/swiftui/view/measure/geometryproxy).&#x20;
* The <mark style="color:red;">**proxy**</mark> has a property for the view’s <mark style="color:red;">**proposed layout size**</mark> and a <mark style="color:red;">**subscript**</mark> to resolve [<mark style="color:purple;">**anchors**</mark>](https://lochiwei.gitbook.io/ios/swiftui/data-flow/preferences/anchor-preferences).
* **GeometryReader** reports its **proposed size** back as the **actual size**. Because of this sizing behavior, geometry readers are often especially useful when used as the **background** or **overlay** of another view: they become the **exact size of the view**. We can use this size either to draw something **in the bounds** of the view or to **measure the size** of the view.\
  👉 Thinking in SwiftUI, p.89, Ch.5, Custom Layout - GeometryReader
  {% endhint %}
  {% endtab %}

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

* SwiftUI  ⟩ &#x20;
  * [GeometryReader](https://developer.apple.com/documentation/swiftui/geometryreader)
  * [GeometryProxy](https://developer.apple.com/documentation/swiftui/geometryproxy)
  * [CoordinateSpace](https://developer.apple.com/documentation/swiftui/coordinatespace)
* CoreGraphics  ⟩  [CGRect](https://developer.apple.com/documentation/coregraphics/cgrect)
* [ScrollViewReader](https://developer.apple.com/documentation/swiftui/scrollviewreader)
  {% endtab %}

{% tab title="📗 參考" %}

* [x] [Understanding frames and coordinates inside GeometryReader](https://www.hackingwithswift.com/books/ios-swiftui/understanding-frames-and-coordinates-inside-geometryreader)
* [ ] Thinking in SwiftUI, Ch. 5, Custom Layout
* [ ] SwiftUI Lab ⟩&#x20;
  * [x] [GeometryReader to the Rescue](https://swiftui-lab.com/geometryreader-to-the-rescue/)
  * [x] [Safely Updating The View State](https://swiftui-lab.com/state-changes/)
  * [ ] [second part of Inspecting the View Tree](https://swiftui-lab.com/communicating-with-the-view-tree-part-2/)
* [x] [How to define variables inside a GeometryReader](https://www.nuomiphp.com/eplan/en/144308.html) - nuomiphp
  {% endtab %}

{% tab title="🗣 討論" %}

* [What is Geometry Reader in SwiftUI?](https://stackoverflow.com/questions/56729619/what-is-geometry-reader-in-swiftui)
* 自己提問的：(其實兩個問題是類似的，只是自己始終沒搞懂😞)
  * [GeometryReader failed to update its parent's state](https://stackoverflow.com/questions/64310736/swiftui-geometryreader-failed-to-update-its-parents-state)
  * [SwiftUI: view states updated in Xcode preview but not in the built app](https://stackoverflow.com/questions/71183250/swiftui-view-states-updated-in-xcode-preview-but-not-in-the-built-app)
    {% endtab %}
    {% endtabs %}