Learn Courses My Dashboard

How can I dynamically set the Height of a TabView?

Hey everyone !

I’m currently working on a View in which I have a TabView (PageTabViewStyle) inside a ScrollView.

The problem is that I have to specify a frame on the TabView (if we don’t : it just doesn’t show). That bothers me because ideally I would have liked the TabView’s frame to change based on the ChildView’s content.

Right now what happens is that the content of the ChildView is cropped, and knowing that I’ll have a ForEach in all of those ChildViews, I would reeeeeaaaally love to be able to add a dynamic height for each views inside the TabView.

Does anyone know how I would be able to implement this?

Here’s the code below if you want to take a look:

struct ContentView: View {
    
    @State var currentTab: Int = 0
    
    var body: some View {
        
        ScrollView(.vertical, showsIndicators: true) {

            Text("Hello")
                .font(.system(size: 30))
                .fontWeight(.bold)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.top, 30).padding(.leading, 10)
            
            TabBarView(currentTab: $currentTab)
            
            TabView(selection: $currentTab,
                    content:  {
              
                        
                        ChildView()
                            .tag(0)
                
                        ChildView()
                        .tag(1)
                        
                        ChildView()
                            .tag(2)
                        
                        
                }).tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                .frame(height: 800)
                .foregroundColor(.white)
   
        }
    }
}

struct ChildView: View {
    var body: some View {
        
        ZStack {
            
            Color.black
            
            VStack {
        
                ForEach(1...10, id: \.self) { index in
                    
                    Rectangle()
                        .frame(height: 150)
                        .cornerRadius(12)
                        .foregroundColor(.blue)
                        .padding(.vertical, 2)
                    
                }
            }.padding(.horizontal, 12)
        }
    }
}

In advance, thank you for your help ! :blush:

1 Like