This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

First, the bottom navigation

Usually the TabView component of SwiftUI is used as the bottom navigation bar.

struct ContentView: View {
    var body: some View {
        TabView{
            Text("First column page").foregroundColor(.blue).tabItem {
                Image(systemName: "1.square")
                Text("Column one")}Text("Second column page").foregroundColor(.green).tabItem {
                Image(systemName: "2.square")
                Text("Column two")}Text("Third column page").foregroundColor(.red).tabItem {
                Image(systemName: "3.square")
                Text("Column three")}}}}Copy the code

  • tabItemThe red part of the decoration is the navigation barViewOr pages.
  • tabItemThe green part of the package is the navigation bar button itself. The default is vertical.

Two, directional jump

Clicking on the first column will take you to the page that the first column leads to. OK, that’s OK.

What if you have a request and want to be able to jump to that page without having to click the navigation button? For example, the first column page adds a button that, when clicked, will redirect to the third column page.

Graph LR Third bar navigation button --> third bar page non-navigation button --> third bar page

It boils down to three steps:

First, tag each navigation bar

TabView{
    Text("First column page").foregroundColor(.blue).tabItem {
        Image(systemName: "1.square")
        Text("Column one")
    }.tag(1)
    Text("Second column page").foregroundColor(.green).tabItem {
        Image(systemName: "2.square")
        Text("Column two")
    }.tag(2)
    Text("Third column page").foregroundColor(.red).tabItem {
        Image(systemName: "3.square")
        Text("Column three")
    }.tag(3)}Copy the code

Second, the TabView has a parameter called Selection, which is a Binding. So by changing the value of this variable, the TabView will point to the corresponding TAB.

Based on the tag value, selection=1 will jump to pages with tag 1. By default, the tag count starts at 0. In this example, the tag is added manually to understand its role.

struct ContentView: View {
    
    @State var tabViewSelected: Int = 1
    
    var body: some View {
       
        TabView(selection: $tabViewSelected) {Text("First column page").foregroundColor(.blue).tabItem {
                Image(systemName: "1.square")
                Text("Column one")
            }.tag(1)
            Text("Second column page").foregroundColor(.green).tabItem {
                Image(systemName: "2.square")
                Text("Column two")
            }.tag(2)
            Text("Third column page").foregroundColor(.red).tabItem {
                Image(systemName: "3.square")
                Text("Column three")
            }.tag(3)}}}Copy the code
  • Define variablestabViewSelectedThrough the@StateMake it a reference variable.
  • willtabViewSelectedPass it in as a parameterTabViewtheselection, and add in front of the variable$Symbol, convert it toBinding.

The third and final step. Add a button to change the tabViewSelected value.

VStack{
    Text("First column page")
    Button(action: {
        tabViewSelected = 3
    }, label: {
        Text("Jump to column 3")
    }).padding()
}.foregroundColor(.blue).tabItem {
    Image(systemName: "1.square")
    Text("Column one")
}.tag(1)
Copy the code

The final result is as follows

3. Rotation diagram

The TabView is also used to implement a rosette diagram.

The code is as follows:

TabView{
    Rectangle().foregroundColor(.blue).tag(1)
    Rectangle().foregroundColor(.orange).tag(2)
    Rectangle().foregroundColor(.red).tag(3)
}.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
Copy the code

The only difference compared to the navigation bar:

  • Don’t need.tabItemattribute
  • You need to specify the.tabViewStyle(PageTabViewStyle())

TabViewStyle(DefaultTabViewStyle()) is a navigation bar. TabViewStyle(DefaultTabViewStyle()) is a navigation bar. TabViewStyle(PageTabViewStyle()) is only used when you specify.tabViewStyle(PageTabViewStyle()).

PageTabViewStyle specifies the indexDisplayMode (indexDisplayMode) :

  • automatic, the default value is not passed or passedautomaticIf there is only one element in the round, the bottom navigation circle is not displayed. Conversely, when there is more than one element, the navigation circle is displayed.
  • .neverThe navigation circle is completely disabled.
  • .alwaysIs always displayed.

As with the navigation bar in the previous example, a rotograph can also use Selection to specify which elements to display.