Search code examples
swiftuinavigationbarswiftui-tabview

Swiftui Vertical TabView strange margin


I have a TabView rotated to move vertically. Everything works fine, but a strange margin remains on the right. I've tried hiding the navigationbars, but there's always a strange border on the right. Removing .ignoresSafeArea() solves the problem, but clearly the view is no longer in full screen.

        ZStack {
            GeometryReader { proxy in
                TabView(selection: $selectedTabIndex) {
                    ForEach(0..<10) { index in
                        VStack() {
                            Text("test \(index)")
                        }
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.yellow)
                    }
                    .frame(width: proxy.size.width, height: proxy.size.height)
                    .rotationEffect(.degrees(-90))
                }
                .frame(width: proxy.size.height, height: proxy.size.width)
                .rotationEffect(.degrees(90), anchor: .topLeading)
                .offset(x: proxy.size.width)
            }
            .tabViewStyle(
                PageTabViewStyle(indexDisplayMode: .never)
            )
        }
        .navigationBarTitle("")
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
        .ignoresSafeArea()

Some idea?


Solution

  • i found the solution. Adding a scrollview .ignoresSafeArea(.all) also takes the top safe area. I think that was what caused the margin to the right after the rotation.

        ScrollView(.init()) {
            ZStack {
                GeometryReader { proxy in
                    TabView() {
                        ForEach(0..<10) { index in
                            VStack() {
                                Text("test \(index)")
                            }
                            .frame(maxWidth: .infinity, maxHeight: .infinity)
                            .background(Color.yellow)
                        }
                        .frame(width: proxy.size.width, height: proxy.size.height)
                        .rotationEffect(.degrees(-90))
                    }
                    .frame(width: proxy.size.height, height: proxy.size.width)
                    .rotationEffect(.degrees(90), anchor: .topLeading)
                    .offset(x: proxy.size.width)
                }
                .tabViewStyle(
                    PageTabViewStyle(indexDisplayMode: .never)
                )
            }
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
            .ignoresSafeArea()
            
        }
        .ignoresSafeArea()