12

I'm trying to build a TabbedView with the following simple code:

TabbedView {
    Text("Hello world")
        .tabItemLabel(Text("Hello"))
    Text("Foo bar")
        .tabItemLabel(Text("Foo"))
}

When running, both tabs are visible and enabled but the second tab's ("Foo") content is blank.

5 Answers 5

22

Try adding tags:

    TabbedView {
        Text("Hello world")
            .tabItem { Text("Hello") }
            .tag(0)
        Text("Foo bar")
            .tabItem { Text("Foo") }
            .tag(1)
    }
3
  • This doesn't fix it on Xcode11Beta, Please see also : stackoverflow.com/questions/56604914/… Commented Jun 14, 2019 at 21:17
  • 2
    Thanks. How in the world did you figure out this fix?
    – Brad
    Commented Jun 26, 2019 at 13:44
  • 1
    .tabItemLabel is deprecated use .tabItem instead, please update your answer
    – krjw
    Commented Jul 17, 2019 at 16:55
3

I was able to fix this by adding a selection state variable and passing that in for the selection:

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

    var body: some View {
        TabbedView(selection: $selection) {
            Text("Tab 1!").tabItemLabel(
                Text("Tab 1")).tag(1)
            Text("Tab 2!").tabItemLabel(Text("Tab 2")).tag(2)
        }
    }
}

Now, tapping "Tab 2" will show "Tab 2!" on the screen, as opposed to a blank screen.

This was using Xcode 11.0 beta 2 (11M337n), macOS Catalina 10.15 Beta (19A487l).

1

In the newest version you should use TabView:

   TabView {
        AnyView()
            .tabItem {
                Text("Label 1")
            }
        AnyView()
            .tabItem {
                Text("Label 2")
            }
    }
1

In Xcode GM, TabbedView was renamed to TabView. So here's the right way to create a tab bar in SwiftUI now:

  TabView {
        Text("Hello world")
            .tabItem { Text("Hello") }
            .tag(0)
        Text("Foo bar")
            .tabItem { Text("Foo") }
            .tag(1)
    }
0

Try this way, but you can't use an icon from SF Symbols, use the icons from //icons8.com or from another platform. or watch this tutorial https://www.youtube.com/watch?v=3PfCU5h5z94

struct ContentView : View {
    var body : some View {
        TabbedView {        
             Living_R()
                 .tabItemLabel(VStack {
                     Image("home")
                     Text("Home")
                 }).tag(0)
                    
             ContentView()
                 .tabItemLabel(VStack {
                     Image("search")
                     Text("Search")
                 }).tag(1)
                
             Text("Info")
                 .tabItemLabel(VStack {
                     Image("page")
                     Text("Doc")
                 }).tag(2)
        }   
    }    
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.