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

Content inside TabView is not growing Inside ScrollView – Ios swift

I am facing very serious problem in my project. The scenario is something like this.

A SwiftUi screen has NavigationBar -> Sticky Header -> Horizontal TabBarItems -> TabView then each TabView has it’s own View using ListView or ScrollView as required

Problem is ListView or ScrollView is not auto growing as per content even its not visible until not giving the height to TabView or ContentView and i can’t calculate the content height and give it to the page because content ate too dynamic and big.

Sample code is as follow –

struct ContentView: View {
    var body: some View {
        VStack {
            VStack{
                Text("Sticky Header")
            }
            ScrollView {
                HeaderView()
                
                CustomTabView()
                    .frame(height: 100) <--- I don't want to give this height anymore.
            }
        }
        .padding()
    }
}

struct HeaderView: View {
    var body: some View {
       Image("W")
            .resizable()
            .frame(minWidth: 0, maxWidth: .infinity)
            .frame(height: 200)
    }
}

struct CustomTabView: View {
    var body: some View {
        TabView(content: {
            FirstTavView()
            FirstTavView()
            FirstTavView()
        })
        .tabViewStyle(.page(indexDisplayMode: .never))
    }
}

struct FirstTavView: View {
    var body: some View {
        List(0..<100) { index in
            Text("Index number is --- > (index)")
        }
    }
}

Wireframe is :
enter image description here

Tags:

2

Answers


  1. 0 
    LazyVStack(spacing: 1, pinnedViews: [.sectionHeaders]) {
    // ...
}

    Your solution is just using LazyVStack and StickeyHeader by pinnedViews. Layout inside will grow up with your content instead.
    And control your parent by set frame for tabview.

    TabView(content: {
            FirstTavView()
            FirstTavView()
            FirstTavView()
        })
        .frame(w : h)
        .tabViewStyle(.page(indexDisplayMode: .never))

    ```
    Login or Signup to reply.
  2. 0

    I’m new in this technology but I think I have the solution.

      LazyVGrid(columns: Array(repeating: GridItem(.flexible(),spacing: 4), count: 3), spacing: 4,content: {
            ForEach(1...19,id: .self) {index in
                   GeometryReader { post in
//
                           let width = post.frame(in: .global).width
                                    
                            ImageView(index: index, width: width)
                      }
                                .frame(height: 120)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search