SwiftUI 如何使用 TabView 将多个视图组织到一个带有底部选项卡栏的布局中,让用户能够在多个视图间切换。

7 min read

首先,我们需要创建多个视图和对应的标签,例如:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("First View")
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First")
                }
            Text("Second View")
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second")
                }
            Text("Third View")
                .tabItem {
                    Image(systemName: "3.circle")
                    Text("Third")
                }
        }
    }
}

TabView 中,我们添加了三个带有标签的视图:第一个视图使用 1.circle 图标和 "First" 标签,第二个视图使用 2.circle 图标和 "Second" 标签,以此类推。当用户点击标签时,视图会相应地更改。

此外,我们还可以通过设置 selection 属性来指定默认显示的视图,例如:

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection) {
            // views and tab items...
        }
    }
}

在此代码中,我们使用 @State 属性将 selection 初始化为 0,这意味着默认情况下将显示第一个视图。然后,在 TabView 中,我们将 selection$selection 绑定,以便在用户选择不同的标签时更新它。