GeometryReader (GeometryReader)
اینجا با «GeometryReader SwiftUI» آشنا می شوی. «GeometryReader» اندازه و جای والد را می دهد. سپس چیدمان واکنش گرا می سازی؛ یعنی ظاهر با فضا هماهنگ می شود.
خواندن اندازه والد با GeometryReader
«والد (Parent)» یعنی ظرف اصلی نمای تو. GeometryReader اندازه همین ظرف را می دهد. بعد، متن ها یا کارت ها را هوشمند می چینی.
import SwiftUI
struct GeometryDemo: View {
var body: some View {
GeometryReader { geo in
VStack(spacing: 12) {
Text("Width: \\((Int(geo.size.width)))")
Text("Height: \\((Int(geo.size.height)))")
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
.background(Color.orange.opacity(0.1))
}
}
نکته: از geo.size فقط برای چیدمان استفاده کن، نه منطق داده.
GeometryReader برای جای گذاری واکنش گرا
می خواهی یک «برچسب» گوشه پایین راست باشد؟ اندازه ظرف را داری. بنابراین با alignment و offset جای دقیقش را تعیین کن.
import SwiftUI
struct GeometryPositionDemo: View {
var body: some View {
GeometryReader { geo in
ZStack {
Color.orange.opacity(0.1)
Text("Bottom Right")
.padding(8)
.background(.thinMaterial, in: Capsule())
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .bottomTrailing
)
.offset(x: 0, y: -12)
}
}
}
}
گام های تمرینی سریع
- یک GeometryReader بساز و اندازه را چاپ کن.
- یک کارت بساز و با alignment جای بده.
- offset را کم وزیاد کن و نتیجه را ببین.
هشدار: از GeometryReader بی مورد استفاده نکن. گاهی VStack و Spacer کافی هستند.
پیمایش و منابع بیشتر
برای شبکه بندی واکنش گرا، سر بزن به گریدها. برای اندازه گذاری دقیق، بخش فریم و پدینگ را هم ببین. همچنین مروری کلی در چیدمان SwiftUI هست.
جمع بندی سریع
- GeometryReader اندازه والد را می دهد.
- alignment جای عناصر را کنترل می کند.
- offset ریزتنظیم موقعیت انجام می دهد.
- فقط وقتی لازم است استفاده کن.