SwiftUI组件之TabView

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

一、底部导航

通常SwiftUI组件TabView是作为底部导航栏使用的。

struct ContentView: View {
    var body: some View {
        TabView{
            Text("第一栏页面").foregroundColor(.blue).tabItem {
                Image(systemName: "1.square")
                Text("第一栏")
            }
            Text("第二栏页面").foregroundColor(.green).tabItem {
                Image(systemName: "2.square")
                Text("第二栏")
            }
            Text("第三栏页面").foregroundColor(.red).tabItem {
                Image(systemName: "3.square")
                Text("第三栏")
            }
        }
    }
}
复制代码

• tabItem修饰的红色部分，是导航栏导向的View或者说页面。
• tabItem包裹的绿色部分，就是导航栏按钮本身。默认是纵向排列。

二、定向跳转

点击第一栏就会跳转到第一栏导向的页面，OK，这没问题。

如果有个需求，希望不用点击导航按钮也能跳转到该导向的页面，该怎么办呢。举例来说，第一栏页面，增加一个按钮，通过点击这个按钮，能够跳转到第三栏导向的页面。