1

My goal is to have a vertical paginated tabview with a scrollview inside. Scrolling as soon as you finish the scrollview you pass to the other tab and if the content of the scrollview has a lower height than the screen, scrolling passes directly to the next tab.

var body: some View {
    GeometryReader { proxy in
        TabView {
            ForEach(colors, id: \.self) { color in
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(alignment: .bottom, spacing: 20) {
                            ForEach(0..<15) { i in
                                //GeometryReader { block in
                                    VStack(alignment: .leading) {
                                        Text("Block test test test test test test \(i)")
                                    }
                                    .rotationEffect(.degrees(-90))
                                    .frame(width: 70, height: proxy.size.width, alignment: .leading)
                                    .background(Color.green)
                                    .id(i)
                                //}
                                //.offset(y: proxy.size.width / 2)
                            }
                    }
                    .frame(height: proxy.size.height)
                    .background(Color.blue)
                }
                .frame(width: proxy.size.height, height: proxy.size.width)
                .background(Color.pink)
            }
            .frame(width: proxy.size.width,height: proxy.size.height)
        }
        .frame( width: proxy.size.height, height: proxy.size.width)
        .rotationEffect(.degrees(90), anchor: .topLeading)
        .offset(x: proxy.size.width)
        .tabViewStyle(
            PageTabViewStyle(indexDisplayMode: .never)
        )
    }
}

These are the steps I followed:

  1. created a tabview with horizontal scrolls inside
  2. Rotated the tabview by 90°
  3. Rotated the Vstacks inside the scrollview by -90°

The result is exact and the scrolling of the contents is continuous passing smoothly between scroll and tab, but the only problem is that I can't control the dimensions of the Vstacks inside the scrollview and therefore I can't have Vstacks with different heights in based on the content.

I tried to add a GeometryReader { block for the VStacks but besides not giving me the correct measurements of the VStacks it breaks the layout completely.

How can I get the dimensions of each Vstack correctly?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Stefano Vet
  • 567
  • 1
  • 7
  • 18

0 Answers0