اسپیسر و ترازبندی (Spacers & Alignment)
در SwiftUI، «اسپیسر (Spacer)» فاصله ساز هوشمند است. همچنین «ترازبندی (Alignment)» جای دقیق عناصر را تعیین می کند. مثل نیمکت کلاس؛ اسپیسر دانش آموزها را پخش می کند، ترازبندی می گوید چه کسی کجا بنشیند.
اسپیسر و ترازبندی در یک نگاه
با Spacer() محتوا پخش می شود. با گزینه alignment در پشته ها، جای هر آیتم مشخص می شود. سپس با frame می توان پهنا را گسترش داد.
import SwiftUI
struct SpacersAlignmentDemo: View {
var body: some View {
HStack {
Text("Left")
Spacer()
Text("Right")
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
}
}
نکته: اسپیسر مثل فنر است؛ فضای خالی را می بلعد و عناصر را منظم می کند.
تراز عمودی و راهنمای تراز
برای متن ها، «خط مبنا (Baseline)» مهم است. با alignment روی پشته و alignmentGuide روی هر نما، هم تراز دقیق می شویم.
import SwiftUI
struct AlignmentGuideDemo: View {
var body: some View {
VStack(alignment: .leading, spacing: 16) {
HStack(alignment: .firstTextBaseline, spacing: 8) {
Text("Title")
.font(.title)
Text("Aligned")
.alignmentGuide(.firstTextBaseline) { d in
d[.bottom]
}
}
HStack {
Text("Left")
Spacer()
Text("Right")
}
}
.padding()
}
}
گام های تمرینی سریع
- یک HStack بساز و دو Text بگذار.
- یک
Spacer()بینشان قرار بده. - با
.frame(maxWidth: .infinity)پهنا را کامل کن. - یک HStack دیگر بساز و
.firstTextBaselineرا امتحان کن.
منابع و ادامه مطالعه
بخش پشته ها چیدمان افقی، عمودی و لایه ای را پوشش می دهد. همچنین صفحه چیدمان SwiftUI نمای کلی می دهد. برای بازگشت سریع، از این نشانی اسپیسر و ترازبندی استفاده کن.
جمع بندی سریع
- اسپیسر محتوا را منظم پخش می کند.
- ترازبندی جای دقیق عناصر را می دهد.
- Baseline متن ها را هم خط می کند.
- راهنمای تراز، قانون سفارشی می سازد.