Swiftui Tabbedview Only Shows First Tab's Content

SwiftUI TabbedView only shows first tab's content

Try adding tags:

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

Views content not showing on switching to other tabs using TabbedView of SwiftUI

In beta 5, your code works, and also TabbedView was renamed to TabView. If you cannot upgrade to beta 5 yet, to fix your problem in beta 4, you need to add .tag(n) to each view:

struct ContentView : View {
    var body: some View {
         TabbedView {
            Text("The First Tab").tag(1)
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
            }
            Text("Another Tab").tag(2)
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
            }
            Text("The Last Tab").tag(3)
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
            }
        }.font(.headline)
    }
}

How do I use TabbedView in SwiftUI?

With XCode beta 3 the following should work:

import SwiftUI

struct Home : View {
    @State private var currentTab = 1

    var body: some View {
        TabbedView(selection: $currentTab) {
            FirstView()
                .tabItem {
                    VStack {
                        Image(systemName: "1.circle")
                        Text("First Tab")
                    }
                }.tag(1)
            SecondView()
                .tabItem {
                    VStack {
                        Image(systemName: "2.circle")
                        Text("Second Tab")
                    }
                }.tag(2)
        }
    }
}

Enclosing the tab label in a VStack seems to be optional, though. So, you might decide to drop this, like:

import SwiftUI

struct Home : View {
    @State private var currentTab = 1

    var body: some View {
        TabbedView(selection: $currentTab) {
            FirstView()
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("First Tab")
                }.tag(1)
            SecondView()
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("Second Tab")
                }.tag(2)
        }
    }
}

SwiftUI Tabbed View prevent swipe to next tab

Small wrong approach. In your ContentView, you are supposed to bind the allowSwipeTo2 variable with the tab1View.

To fix your problem, change the type of variable allowSwipeTo2 in tab1View to @Binding var allowSwipeTo2 : Bool, and finally in your ContentView, call the first tab view like this tab1View(allowSwipeTo2: $allowSwipeTo2)

I have modified the code as below. You can find the modified parts with this comment //modified.

struct ContentView: View {

@State private var selection = 0
@State var allowSwipeTo2 = false

var body: some View {
    VStack {
        Text("Main Content View")
            .font(.system(size: 18))
    }
    
    TabView(selection: $selection){
        tab1View(allowSwipeTo2: $allowSwipeTo2) //modified
            .tag(0)

        if allowSwipeTo2 == true {
            tab2View()
                .tag(1)
        }
        }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
}
}

struct tab1View: View {
@State private var p8_10 = 0
@State private var stepperDisabled = false
@Binding var allowSwipeTo2 : Bool //modified
@State private var showingAlert = false

var body: some View {

    VStack{
        HStack{
            Text("Things")
            Stepper("Total: \(p8_10)", value: $p8_10, in: 0...15)
        }.font(.system(size: 15))
            .disabled(stepperDisabled)
        
        HStack{
            Spacer()
            
            Button("Entry Complete") {
                showingAlert = true
                
            }.alert(isPresented: $showingAlert){
                Alert(
                    title: Text("Entry Complete?"),
                    message: Text("You will no longer be able to change your entry"),
                    primaryButton: .cancel(),
                    secondaryButton: .destructive(
                        Text("OK"),
                        action:{
                            stepperDisabled = true
                            allowSwipeTo2 = true
                        })
                )
            }
            Spacer()
        }
    }
}
}

struct tab2View: View {
var body: some View {
    Text("Tab 2 Content!")
        .font(.system(size: 15))
}
}

In SwiftUI how do I put the tabs in a TabbedView at the top of the view?

In order to do this you could create your tabs view as a container of the individual tabs something like this...

struct TabbedView: View {

    @State private var selectedTab: Int = 0

    var body: some View {
        VStack {
            Picker("", selection: $selectedTab) {
                Text("First").tag(0)
                Text("Second").tag(1)
                Text("Third").tag(2)
            }
            .pickerStyle(SegmentedPickerStyle())

            switch(selectedTab) {
                case 0: FirstTabView()
                case 1: SecondTabView()
                case 2: ThirdTabView()
            }
        }
    }
}

Doing this, you are conditionally populating the "Tab page" based on the value of the segmented control.

By using @State and $selectedTab the segmented control will update the selectedTab value and then re-render the view which will replace the page based on the new value of selectedTab.

Edit

Switches now work in SwiftUI beta. /p>

SwiftUI tab view display sheet

A possible solution is to use TabView selection to activate sheet programmatically, but do not actually allow this selection to be changed (tested with Xcode 12 / iOS 14).

Update: retested with Xcode 13.4 / iOS 15.5

struct ContentView: View {
    @State var isPresenting = false
    @State private var selectedItem = 1
    @State private var oldSelectedItem = 1

    var body: some View {
        TabView(selection: $selectedItem){
            Text("1")
                .tabItem {
                        Image(systemName: "house")
                }.tag(1)

            Text("")    // I want this to display the sheet.
                .tabItem { Image(systemName: "plus.circle") }
                .tag(2)

            Text("3")
                .tabItem {
                    Image(systemName: "calendar")
                }.tag(3)
        }
     //   .onReceive(Just(selectedItem))  // SwiftUI 1.0 - import Combine for this
        .onChange(of: selectedItem) {    // SwiftUI 2.0 track changes
                if 2 == selectedItem {
                self.isPresenting = true
                } else {
                    self.oldSelectedItem = $0
                }
            }
        .sheet(isPresented: $isPresenting, onDismiss: {
                self.selectedItem = self.oldSelectedItem
            }) {
            testSheet
        }
        .accentColor(Color.orange)

    }
    var testSheet : some View {
        VStack{
            Text("testing")
        }
    }
}

---

Related Topics