How it works
TabContent is the protocol that describes a single selectable tab inside a TabView. A tab-based interface is built from a content closure, and TabContent is the common type that every entry in that closure must conform to — it pairs a destination view with the label, image, and selection value that identify the tab. Reach for it whenever you compose a TabView from individual Tab values or write your own reusable tab type, since it is the currency the builder accepts and the constraint that lets tabs be grouped, badged, and reordered uniformly.
Produce TabContent values inside the TabView builder
A TabView's trailing closure is a tab-content builder: every expression it returns must conform to TabContent, and that is what gives the view its tabs. In the example the three
Tabinstances are the TabContent values, and TabView collects them in order to build the bar.Bind a selection value through the value parameter
When TabContent carries an explicit value, TabView can track which tab is active programmatically. Each
Tabis created with avalue(0,1,2) that matches the type of theselectionbinding passed asTabView(selection: $selection), so updating that state switches tabs.Supply the label and symbol that represent the tab
TabContent describes how a tab presents itself, not just where it leads — a title and an SF Symbol render in the tab bar. Here the
Tab("Home", systemImage: "house", ...)arguments give the visible label and icon for each entry while the closure holds the destination.Provide the destination view in the content closure
The final closure of each TabContent value is the screen shown when that tab is selected. The
Tabfor Home returnsText("Home").padding(), and switching tabs simply swaps which TabContent's view body is displayed.
selection initializer from @State private var selection = 0 to = 2 to see TabView open on the Profile tab, since that value matches the third Tab.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct TabContentDemo: View {
@State private var selection = 0
var body: some View {
TabView(selection: $selection) {
Tab("Home", systemImage: "house", value: 0) {
Text("Home")
.padding()
}
Tab("Search", systemImage: "magnifyingglass", value: 1) {
Text("Search")
.padding()
}
Tab("Profile", systemImage: "person", value: 2) {
Text("Profile")
.padding()
}
}
}
}