> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/measure/geometryreader/geometryreader-de-dui-qi-fang-shi.md).

# GeometryReader 的對齊方式

╱🚧 under construction

[SwiftUI](/ios/swiftui.md) ⟩ [views](/ios/swiftui/view.md) ⟩ [measuring](/ios/swiftui/view/measure.md) ⟩ [GeometryReader](/ios/swiftui/view/measure/geometryreader.md) ⟩ alignment 

{% hint style="warning" %} <mark style="color:purple;">**`GeometryReader`**</mark><mark style="color:purple;">**&#x20;**</mark>*<mark style="color:purple;">**的對齊方式**</mark>*

[GeometryReader](/ios/swiftui/view/measure/geometryreader.md) 會將子視圖<mark style="color:yellow;">對齊於左上角</mark>❗️
{% endhint %}

<figure><img src="https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FTrsKB8v1xMZd2GEMxINm%2FGeoReader%20align.jpeg?alt=media&amp;token=0cd35cfd-7607-4f46-91ce-bc7c3a464621" alt=""><figcaption><p><mark style="color:purple;"><strong><code>GeometryReader</code></strong></mark> 的對齊方式    <span data-gb-custom-inline data-tag="emoji" data-code="1f449">👉</span> 「📖 解說」</p></figcaption></figure>

{% tabs %}
{% tab title="📖 解說" %}
{% tabs %}
{% tab title="view1" %}
{% hint style="info" %}
`view1` 直接利用 <mark style="color:blue;">`.overlay`</mark> 來<mark style="color:yellow;">置中對齊</mark> <mark style="color:blue;">`Text`</mark>。
{% endhint %}

```swift
// overlay > Text
Rectangle().overlay {
    Text("Hello")
}
```

{% endtab %}

{% tab title="view2" %}
{% hint style="info" %}

1. 雖然 <mark style="color:blue;">`.overlay`</mark> 負責將子視圖<mark style="color:yellow;">置中對齊</mark>，但是 <mark style="color:blue;">`.overlay`</mark>的子視圖只有 <mark style="color:blue;">`GeometryReader`</mark> 一個，而且 <mark style="color:blue;">`GeometryReader`</mark> 會<mark style="color:yellow;">佔據</mark> <mark style="color:blue;">`.overlay`</mark> 的<mark style="color:yellow;">所有空間</mark>。
2. <mark style="color:blue;">`GeometryReader`</mark> 負責將子視圖<mark style="color:yellow;">對齊</mark><mark style="color:red;">左上角</mark>，但它的子視圖也只有 <mark style="color:blue;">`Text`</mark> 一個，這就是為什麼 `view2` 會跑到<mark style="color:red;">左上角</mark>的原因。
   {% endhint %}

```swift
// overlay > GeometryReader > Text
Rectangle()
    // ⭐️ 1. overlay 負責將子視圖置中對齊
    .overlay { 
        // ⭐️ 2. GeometryReader 負責將子視圖對齊左上角❗️
        GeometryReader { geo in
            // ⭐️ 3. Text 會被 GeometryReader 放在左上角❗️ 
            Text("Hello")
        }// GeometryReader
    }// overlay
```

{% endtab %}

{% tab title="view3" %}
{% hint style="info" %}

1. <mark style="color:blue;">`.overlay`</mark> 還是負責<mark style="color:yellow;">置中對齊</mark>子視圖 (<mark style="color:purple;">**`GeometryReader`**</mark>)
2. <mark style="color:purple;">**`GeometryReader`**</mark> 還是負責將子視圖 ([`ZStack`](/ios/swiftui/view/layout/stacks/zstack.md)) <mark style="color:yellow;">對齊</mark><mark style="color:red;">左上角</mark>
3. 利用 <mark style="color:blue;">`.frame(maxWidth: .infinity, maxHeight: .infinity)`</mark> 將 <mark style="color:blue;">`ZStack`</mark> 放到與 <mark style="color:purple;">**`GeometryReader`**</mark> <mark style="color:yellow;">一樣大</mark> ⭐️&#x20;
4. 可重新讓 <mark style="color:blue;">`ZStack`</mark> 負責<mark style="color:yellow;">置中對齊</mark>子視圖❗️
   {% endhint %}

```swift
Rectangle()
    // ⭐️ 1. overlay 負責將子視圖(GeometryReader)「置中對齊」 
    .overlay { 
        // ⭐️ 2. GeometryReader 負責將子視圖(ZStack)「對齊左上角」❗️ 
        GeometryReader { geo in
            // ⭐️ 4. 將 ZStack 放到與 GeometryReader 一樣大，
            //       就可以讓 ZStack 重新負責「置中對齊」❗️ 
            ZStack {
                Text("Hello")
            }
            // ⭐️ 3. 將 ZStack 放到與 GeometryReader 一樣大❗️(這步很重要)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }// GeometryReader
    }// overlay
```

{% endtab %}
{% endtabs %}
{% endtab %}

{% tab title="💈範例" %}
![⭐️ GeometryReader 負責將子視圖對齊「左上角」](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2F1PIefI67cH80hXHZyAkc%2FGeometryReader.png?alt=media\&token=9502052e-ef64-401b-98b4-53074914430c)

{% tabs %}
{% tab title="💾 程式" %}

```swift
import SwiftUI
import GeometryKit        // for `proxy.size.bottomRight`

struct AlignmentInGeometryReader: View {
    
    // color swatch
    func colorSwatch(_ c: Color, _ opacity: CGFloat = 0.9, size: CGFloat = 40) -> some View {
        c.opacity(opacity)
            .frame(width: size, height: size)
            .shadow(radius: 6)
    }
    
    var body: some View {
        // ⭐️ GeometryReader 負責將子視圖對齊於「左上角」❗️ 
        GeometryReader { proxy in 

            // ⭐️ 子視圖預設對齊左上角
            colorSwatch(.red, size: 100)
            colorSwatch(.orange, size: 80)
            colorSwatch(.yellow, size: 60)
            colorSwatch(.green)
            
            // ⭐️ 子視圖可用 .position() 自己選位置
            // ⭐️ .position() 設定的是子視圖「中心點」的位置(相對於 GeometryProxy)
            colorSwatch(.blue, 0.5)
                .position(.zero)                     // ⭐️ 左上角
            colorSwatch(.purple, 0.5)
                .position(proxy.size.bottomRight)    // ⭐️ 右下角  // 🌀 GeometryKit
            
        }// GeometryReader
        .frame(width: 300, height: 40)    // ⭐️ GeometryReader 母視圖尺寸
        .border(.white.opacity(0.6))
        .overlay {
            Text("**`GeometryReader`**")  // Markdown
                .font(.title3)
                .opacity(0.8)
                .shadow(radius: 4)
        }// overlay
    }// body
}
```

{% endtab %}

{% tab title="⬆️ 需要" %}

* [GeometryKit](/ios/custom/package/geometrykit.md)： for  <mark style="color:blue;">`proxy.size.bottomRight`</mark>
  {% endtab %}
  {% endtabs %}
  {% endtab %}

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

* [Slider label position](/ios/swiftui/control/slider/label-position.md)：必須了解 <mark style="color:purple;">GeometryReader 的對齊方式</mark>。
  {% endtab %}
  {% endtabs %}