How to adjust position of tabItem icons in SwiftUI?

43 views Asked by At

I have a TabView in SwiftUI with the following construction.

import SwiftUI

struct MainPageView: View {
    
    //@State private var selectedTab = 0
    
    
    var body: some View {
        VStack(spacing:0) {
            Spacer()
            
            //TabView(selection: $selectedTab) {
            TabView {
                Group {
                    FeedPageView()
                        .tabItem {
                            Image(systemName: "house")
                            Text("Example")
                        }
                        .tag(0)
                    
                    SearchPageView()
                        .tabItem{
                            Image(systemName: "magnifyingglass")
                                .foregroundColor(.white)

                        }
                        .tag(1)
                    PostPageView()
                        .tabItem{
                            Image(systemName:"plus.circle")
                                .foregroundColor(.white)
                                
                        }
                        .tag(2)
                    ActivityPageView()
                        .tabItem {
                            Image(systemName: "bolt")
                        }
                        .tag(3)
                    ProfilePageView()
                        .tabItem {
                            Image(systemName: "person.circle")
                                
                        }
                        .tag(4)
                }
                .toolbarBackground(.black, for: .tabBar)
                .toolbarBackground(.visible, for: .tabBar)
            }
            .navigationBarBackButtonHidden(true)
            
        }

    }
}

        
struct MainPageView_Previews: PreviewProvider {
    static var previews: some View {
        MainPageView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
    }
}

This works well enough, but I am confused why I cannot lower the icons into a lower position in the tab bar. The "Example" text sits roughly where I'd like the icons to be centered, but I am unsure how to place them there. Placing Spacer() above the Image for each tab item does nothing.

I don't want the distance hard coded either as I want the relative position consistent regardless of the device. Ideally the icons are centered at the Y level of the "Example" text.

enter image description here

0

There are 0 answers