IOS Swift Question posted in
The official documentation can be found here.

Ios swift – How to move SwiftUI Bottom Tab to the top?

The following SwiftUI code will generate Bottom Tab

public struct TeamBContentView : View {
    public init() {}
    public var body: some View {
        VStack {
            TabView {
                Text("This is home screen")
                    .tabItem {
                        Text("Home")
                        Image(systemName: "house.fill")
                    }
                Text("This is about us screen")
                    .tabItem {
                        Text("About Us")
                        Image(systemName: "person.fill")
                    }
                Text("This is contct us screen")
                    .tabItem {
                        Text("Contact Us")
                        Image(systemName: "phone.fill")
                    }
            }
        }
    }
}

As below

enter image description here

If I want to have it at the Top, is there a way easily transfer it to the Tab to the top of the screen instead?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    One simple way is to use the library provided by https://github.com/QuynhNguyen/SlidingTabView

    As of how to add the Package of the library, refers to the last section of this article

    Then you can use the below code,

    import SlidingTabView

public struct ContentView : View {
    @State private var tabIndex = 0
    public init() {}
    public var body: some View {
        VStack {
            SlidingTabView(selection: $tabIndex, tabs:["Home", "Friends", "Settings"], animation: .easeInOut)
            Spacer()
            if tabIndex == 0 {
                Text("Home")
            } else if tabIndex == 1 {
                Text("Friends")
            } else if tabIndex == 2 {
                Text("Settings")
            }
            Spacer()
        }
    }
}

    enter image description here


  2. 0 
    public struct TeamBContentView : View {
@State private var selectedTab = 0
public init() {}

public var body: some View {
    VStack {
        // Use picker view and set picker style as segmented
        Picker("Tabs", selection: $selectedTab) {
            Text("Home").tag(0)
            Text("About Us").tag(1)
            Text("Contact Us").tag(2)
        }
        .pickerStyle(.segmented)
        .padding()
        
        Spacer()
        
        // Then display the view based on the tab selected
        switch selectedTab {
        case 0:
            Text("This is home screen")
        case 1:
            Text("This is about us screen")
        case 2:
            Text("This is contact[enter image description here][1] us screen")
        default:
            Text("This is home screen")
        }
        Spacer()
    }
    .navigationBarBackButtonHidden() // use this to hide the back button
}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search