گریدها (Grids)
این جا با «گریدهای SwiftUI» آشنا می شوی. «گرید (Grid)» یعنی چیدمان جدولی. با LazyVGrid و LazyHGrid، کارت ها منظم و سریع نمایش می شوند.
گرید تنبل (Lazy Grid)
«تنبل (Lazy)» یعنی آیتم ها فقط وقتی لازم است ساخته می شوند. بنابراین، لیست های بزرگ سریع تر رندر می شوند و حافظه کمتر مصرف می شود.
import SwiftUI
struct GridDemo: View {
let columns: [GridItem] = [
GridItem(.flexible()),
GridItem(.flexible())
]
var body: some View {
LazyVGrid(columns: columns, spacing: 12) {
ForEach(1...6, id: \.self) { i in
Text("Item \\(i)")
.frame(maxWidth: .infinity)
.padding(12)
.background(Color.blue.opacity(0.1))
.cornerRadius(8)
}
}
.padding()
}
}
نکته: .flexible() ستون را کشسان می کند؛ فضا عادلانه تقسیم می شود.
گرید تطبیقی (Adaptive Grid)
«تطبیقی (Adaptive)» یعنی تعداد ستون ها با عرض صفحه تغییر می کند. حداقل عرض هر کارت را تعیین می کنی تا چیدمان همیشه مرتب بماند.
import SwiftUI
struct AdaptiveGridDemo: View {
let columns: [GridItem] = [
GridItem(.adaptive(minimum: 100), spacing: 12)
]
var body: some View {
LazyVGrid(columns: columns, spacing: 12) {
ForEach(1...12, id: \.self) { i in
Text("Card \\(i)")
.frame(maxWidth: .infinity)
.frame(minHeight: 60)
.background(Color.green.opacity(0.12))
.cornerRadius(8)
}
}
.padding()
}
}
گام های تمرینی سریع
- دو ستون انعطاف پذیر بساز.
- ده کارت ساده اضافه کن.
- Spacing را تغییر بده و نتیجه را ببین.
- Adaptive را امتحان کن و minimum را تنظیم کن.
منابع و پیمایش
برای اندازه و فاصله، صفحه فریم و پدینگ را ببین. نمای کلی هم در چیدمان SwiftUI است. همین بخش نیز با کلیدواژه گریدهای SwiftUI قابل دسترسی است.
جمع بندی سریع
- LazyGrid سریع و کم هزینه است.
- flexible ستون ها را مساوی می کند.
- adaptive با عرض صفحه هماهنگ می شود.
- spacing و padding ظاهر را مرتب می کنند.