SwiftUI创建和控制TabView显示的页面，使用selection绑定

基本的APP结构大多都是由底部的tab栏和tab栏包含的页面构成。在SwiftUI中我们可以常见到使用TabView来进行构建APP。那么如何使用TabView呢？

最简单的TabView

TabView {
    Text("Tab 1")
    Text("Tab 2")
}

最简单的tabView

我们使用TabView包裹了两个视图，发现底部的tab栏还是空的，因为我们还没有定义内容。

TabView {
    Text("Tab 1")
        .tabItem {
            Image(systemName: "star")
            Text("One")
        }

    Text("Tab 2")
        .tabItem {
            Image(systemName: "star.fill")
            Text("Two")
        }
}

现在我们能够看到支持切换的tab栏

控制TabView

我们还可以通过创建一个变量来控制显示哪个视图。

1	@State private var selectedTab = 0

我们添加一个变量，然后使用TabView的selection属性来进行绑定。

1	TabView(selection: $selectedTab) {

然后我们需要告诉软件，哪个是0、哪个是1，这里用到的就是tag标记

Text("Tab 2")
    .tabItem {
        Image(systemName: "star.fill")
        Text("Two")
    }
    .tag(1)

完整代码

这样就可以做到默认进入时展示第二个标签页面

完整代码

struct ContentView: View {
    @State private var selectedTab = 1

    var body: some View {
        TabView(selection: $selectedTab) {
            Text("Tab 1")
                .tabItem {
                    Image(systemName: "star")
                    Text("One")
                }
                .tag(0)

            Text("Tab 2")
                .tabItem {
                    Image(systemName: "star.fill")
                    Text("Two")
                }
                .tag(1)
        }
    }
}