TabView (TabView)
«TabView» یعنی نوار تب ها در SwiftUI. با آن بین بخش ها جابه جا می شوی. مثل تب های برنامه پیام رسان. هر تب یک صفحه جدا دارد و آیکن هم می گیرد.
TabView پایه
با «TabView» میان چند بخش سوییچ کن. با «.tabItem» عنوان و آیکن بده. این شبیه دفترچه ای با برگه های برچسب دار است.
import SwiftUI
struct TabBasicDemo: View {
var body: some View {
TabView {
Text("Home")
.tabItem {
Label(
"Home",
systemImage: "house"
)
}
Text("Settings")
.tabItem {
Label(
"Settings",
systemImage: "gear"
)
}
}
}
}
struct ContentView: View {
var body: some View {
TabBasicDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
انتخاب تب و نشان ها (Badge)
با «@State» تب فعال را دنبال کن. سپس با «.badge» تعداد پیام ها را نشان بده. برای مدیریت امن، از enum تب ها استفاده کن.
import SwiftUI
enum Tab: Hashable {
case home
case inbox
}
struct TabSelectionDemo: View {
@State private var selection: Tab = .home
var body: some View {
TabView(selection: $selection) {
Text("Home")
.tabItem {
Label(
"Home",
systemImage: "house"
)
}
.tag(Tab.home)
Text("Inbox")
.tabItem {
Label(
"Inbox",
systemImage: "tray"
)
}
.badge(3)
.tag(Tab.inbox)
}
}
}
struct ContentView: View {
var body: some View {
TabSelectionDemo()
}
}
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
گام های عملی
- یک TabView بساز و باز کن.
- برای هر تب، یک View و tabItem بده.
- با @State انتخاب تب را نگه دار.
- در صورت نیاز، badge روی تب بگذار.
نکته: برای پروژه های بزرگ، enum تب ها را گسترش بده تا ناوبری پایدار بماند.
پیوندهای داخلی
برای ناوبری صفحه به صفحه، NavigationLink را ببین. همچنین مرجع ظرف ناوبری در NavigationStack توضیح داده شده است.
جمع بندی سریع
- TabView برای جابه جایی میان بخش هاست.
- .tabItem عنوان و آیکن می دهد.
- @State تب فعال را نگه می دارد.
- .badge تعداد اعلان را نشان می دهد.