2

Is it possible to have TabView tabItem to be positioned below the screen content?

My layout is:

var body: some View {
            TabView {
                self.contentView
                    .tabItem {
                        Image(systemName: "chart.bar.fill")
                        Text("Chart")
                }
                Text("Screen 2")
                    .tabItem {
                        Image(systemName: "person.3.fill")
                        Text("Leaderboard")
                }
                Text("Screen 3")
                    .tabItem {
                        Image(systemName: "ellipsis")
                        Text("More")
                }
            }
        }

The actual result looks like this: enter image description here

Is it possible to position TabView below the content layout, not on top of it? Or the option would be to set bottom padding on content view (and in this case it would be required to check the TabView height).

The contentView layout looks like this:

VStack {
   List() { ... }
   HStack { Button() Spacer() Button() ... }
}
Kurovsky
  • 1,081
  • 10
  • 25
  • 2
    Direct answer is no, but probably your `contentView` layout does not fit. Why does it under tabbar? Would you add that code. – Asperi Jul 04 '22 at 17:03
  • @Asperi Its a VStack layout with buttons on the bottom. Actually, adding the self.contentView.padding(.bottom, 1) helps to resolve this issue.. but why 1 works is a question. Supposed it should be tabBarHeight value, not 1. – Kurovsky Jul 04 '22 at 18:12
  • Actually I have a List on top of buttons, that must be an issue. – Kurovsky Jul 04 '22 at 20:10

2 Answers2

2

The contentView contains a List, and it fills all available space, moving buttons that are located below the List under the TabView. Adding Space after the contentView solves the issue.

var body: some View {
            TabView {
                VStack { 
                    self.contentView
                    Spacer()
                }
                    .tabItem {
                        Image(systemName: "chart.bar.fill")
                        Text("Chart")
                }
                Text("Screen 2")
                    .tabItem {
                        Image(systemName: "person.3.fill")
                        Text("Leaderboard")
                }
                Text("Screen 3")
                    .tabItem {
                        Image(systemName: "ellipsis")
                        Text("More")
                }
            }
        }

Thank you @Asperi for pointing in right direction, and checking the children of the contentView.

Kurovsky
  • 1,081
  • 10
  • 25
0

Just add to your content view:

.padding(.bottom, tabBarHeight)
Paniti Marta
  • 52
  • 4