Today I will show you how to use TabView.

The TabView is located at the bottom of the screen. It allows users to switch between views quickly, similar to a UITabBarController.

Views controlled by TabView are in code blocks.

TabView supported types like Text, Image, or LayoutView. Other types of views will produce a visible blank tab.

Steps:

• Add a Text as the first tab.

• Set the font size of the Text to 32

• Then set the tabItem of Text. Only if tabItem is set the corresponding tab will be displayed at the bottom of the screen.

• Add an Image and a Text to display the first tab at the bottom.

Text("First page")
    .font(.system(size: 32))
    .tabItem {
        Image(systemName: "house.fill")
        Text("First")
    }

Next:

• Continue to add the second tab in the same way

Text("Second page")
    .font(.system(size: 32))
    .tabItem {
        Image(systemName: "magnifyingglass.circle.fill")
        Text("Second")
    }

Source Code:

struct ContentView: View {
    
    var body: some View {
        VStack {
            TabView {
                Text("First page")
                    .font(.system(size: 32))
                    .tabItem {
                        Image(systemName: "house.fill")
                        Text("First")
                    }
                
                Text("Second page")
                    .font(.system(size: 32))
                    .tabItem {
                        Image(systemName: "magnifyingglass.circle.fill")
                        Text("Second")
                    }
            }
        }
    }
}

Follow me on:

(Foks) Hui Wang's LinkedIn