SwiftUI 垂直 TabView 奇怪的边距

huangapple go评论62阅读模式
英文:

Swiftui Vertical TabView strange margin

问题

我有一个TabView旋转以垂直移动的情况。一切都正常,但右侧仍然有奇怪的边距。我尝试隐藏导航栏,但右侧总是有一个奇怪的边框。删除.ignoresSafeArea()可以解决问题,但显然视图不再全屏。

英文:

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?

答案1

得分: 0

我找到了解决方案。添加一个 ScrollView 并使用 .ignoresSafeArea(.all) 也会占用顶部安全区域。我认为这是导致旋转后右侧出现边距的原因。

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()
英文:

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..&lt;10) { index in
                        VStack() {
                            Text(&quot;test \(index)&quot;)
                        }
                        .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(&quot;&quot;)
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
        .ignoresSafeArea()
        
    }
    .ignoresSafeArea()

huangapple
  • 本文由 发表于 2023年5月28日 15:49:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76350470.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定