GeometryReader 的對齊方式

╱🚧 under construction

⟩ ⟩ ⟩ ⟩ alignment

GeometryReader 的對齊方式

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

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

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

雖然 .overlay 負責將子視圖置中對齊，但是 .overlay的子視圖只有 GeometryReader 一個，而且 GeometryReader 會佔據 .overlay 的所有空間。
GeometryReader 負責將子視圖對齊左上角，但它的子視圖也只有 Text 一個，這就是為什麼 view2 會跑到左上角的原因。

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

.overlay 還是負責置中對齊子視圖 (GeometryReader)
利用 .frame(maxWidth: .infinity, maxHeight: .infinity) 將 ZStack 放到與 GeometryReader 一樣大 ⭐️
可重新讓 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

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

Previous GeometryReader NextConfiguring Views

Last updated 4 months ago

Was this helpful?

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

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

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 }