فریم و پدینگ (Frames & Padding)
در SwiftUI، «فریم (Frame)» اندازه نما را تعیین می کند. همچنین «پدینگ (Padding)» فاصله داخل جعبه است. برای یادگیری بهتر، همین امروز با چند مثال ساده پیش می رویم.
فریم ثابت و پدینگ
با .frame(width:height:) اندازه را ثابت می کنی. سپس با .padding() متن نفس می کشد. مثل دفتر مشق که حاشیه دارد.
import SwiftUI
struct FramesPaddingDemo: View {
var body: some View {
VStack(spacing: 16) {
Text("Fixed size")
.frame(width: 160, height: 60)
.background(.blue.opacity(0.1))
Text("Max width")
.frame(maxWidth: .infinity, alignment: .leading)
.padding(8)
.background(.green.opacity(0.1))
}
.padding()
}
}
نکته: پدینگ مثل ضربه گیر است؛ متن به لبه ها نمی چسبد.
فریم انعطاف پذیر و ترازبندی
با min و max محدودیت می دهی. سپس با alignment جای متن را مشخص می کنی. این کار مثل نیمکت بزرگ با صندلی های تنظیم پذیر است.
import SwiftUI
struct FlexibleFramesDemo: View {
var body: some View {
VStack(spacing: 12) {
Text("Trailing")
.frame(minWidth: 120, maxWidth: .infinity, alignment: .trailing)
.padding(8)
.background(.gray.opacity(0.1))
.cornerRadius(6)
Text("Tall block")
.frame(maxWidth: .infinity)
.frame(maxHeight: 120)
.background(.orange.opacity(0.1))
.cornerRadius(6)
}
.padding()
}
}
گام های تمرینی سریع
- یک Text بساز و فریم ثابت بده.
- پدینگ اضافه کن و رنگ پس زمینه بده.
- حالا
maxWidth: .infinityرا امتحان کن. - با
.trailingترازبندی را تغییر بده.
منابع و ادامه مطالعه
صفحه اسپیسر و ترازبندی توضیح تکمیلی می دهد. همچنین نمای کلی در چیدمان SwiftUI موجود است. برای بازگشت، از این نشانی فریم و پدینگ استفاده کن.
جمع بندی سریع
- فریم اندازه را کنترل می کند.
- پدینگ فضای داخلی می دهد.
- محدودیت min و max واکنش گرا هستند.
- ترازبندی جای محتوا را مشخص می کند.