iosxcodeswiftuiswiftui-tabviewswiftui-scrollview

TabView with PageTabViewStyle() not using available height in ScrollView


so I have a TabView like shown below, but when I try to implement it in a ScrollView I always have to give it a fixed height. Is there a way of telling the tabview to use the space it needs in the scrollView? I don't know the height of the inner content (which btw. changes over time) of the TabView, so a fixed height doesn't work for me.

I tried .frame(maxHeight: .infinity), but that doesn't seem to work

import SwiftUI

struct TEST: View {
    var body: some View {
        ScrollView {
            TabView {
                Text("Hello World")
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .frame(maxHeight: .infinity)
            // only .frame() with fixed Height works...
        }
    }
}

Solution

  • You need to use a fixed height like the screen height because the scrollview has infinite height. So when you set an infinite height on object inside the scrollview it takes only the space that the content really needs. I recommend you to use a the screen height on your TabView like this :

    .frame(height: UIScreen.main.bounds.height)

    Or to use a GeometryReader that gives you the height taken by the ScrollView and then apply it to the TabView frame like this :

    struct MyView: View {
         var body: some View {
              GeometryReader { proxy in
                   ScrollView {
                        TabView {
                             Text("Hello World")
                        }
                        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                        .frame(height: proxy.size.height)
                    }
                }
        
            }
    }