╱🚧 under construction
SwiftUI ⟩ views ⟩ measuring ⟩ GeometryReader ⟩ alignment
GeometryReader 的對齊方式
GeometryReader 會將子視圖對齊於左上角❗️
GeometryReader 的對齊方式 👉 「📖 解說」
GeometryReader 負責將子視圖對齊「左上角」GeometryKit： for proxy.size.bottomRight
Slider label position：必須了解 GeometryReader 的對齊方式。
Last updated
Was this helpful?
Was this helpful?
// overlay > Text
Rectangle().overlay {
Text("Hello")
}// overlay > GeometryReader > Text
Rectangle()
// ⭐️ 1. overlay 負責將子視圖置中對齊
.overlay {
// ⭐️ 2. GeometryReader 負責將子視圖對齊左上角❗️
GeometryReader { geo in
// ⭐️ 3. Text 會被 GeometryReader 放在左上角❗️
Text("Hello")
}// GeometryReader
}// overlayRectangle()
// ⭐️ 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
}// overlayimport 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
}