🔰GeometryReader 的對齊方式

╱🚧 under construction

SwiftUI ⟩ views ⟩ measuring ⟩ GeometryReader ⟩ alignment

GeometryReader 的對齊方式

GeometryReader 會將子視圖對齊於左上角❗️

GeometryReader 的對齊方式 👉 「📖 解說」

📖 解說

view1

view1 直接利用 .overlay 來置中對齊 Text。

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

view2

1. 雖然 .overlay 負責將子視圖置中對齊，但是 .overlay的子視圖只有 GeometryReader 一個，而且 GeometryReader 會佔據 .overlay 的所有空間。

2. GeometryReader 負責將子視圖對齊左上角，但它的子視圖也只有 Text 一個，這就是為什麼 view2 會跑到左上角的原因。

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

view3

1. .overlay 還是負責置中對齊子視圖 (GeometryReader)

2. GeometryReader 還是負責將子視圖 (ZStack) 對齊左上角
3. 利用 .frame(maxWidth: .infinity, maxHeight: .infinity) 將 ZStack 放到與 GeometryReader 一樣大 ⭐️

4. 可重新讓 ZStack 負責置中對齊子視圖❗️

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

💈範例

⭐️ GeometryReader 負責將子視圖對齊「左上角」

💾 程式

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
}

⬆️ 需要

• GeometryKit： for proxy.size.bottomRight

👥 相關

• Slider label position：必須了解 GeometryReader 的對齊方式。