Question

当前我正在开发一个多选项卡应用程序，因此ContentView由一个TabView组成。在链接的SecondView中，我想隐藏TabBar，但这样做时，ScrollView的内容与它下面的周围VStack的内容重叠。

以下代码是该应用程序的简化和抽象代码：

struct ContentView: View {
    
    static var tabBar: UITabBar!
    
    var body: some View {
        TabView {
            NavigationView {
                NavigationLink(destination: SecondView()) {
                    Text("Navigate")
                }
            }
            .tabItem { EmptyView() }
        }
    }
}

struct SecondView: View {
    var body: some View {
        VStack {
            ScrollView {
                ForEach(0..<50) { idx in
                    Text("\(idx)")
                }
            }
            Text("Just some text so visualize the overlapping")
        }
        .padding(.bottom, 30)
        .onAppear {
            ContentView.tabBar.isHidden = true
        }
        .padding(.bottom, -ContentView.tabBar.frame.height)
    }
}

extension UITabBar {
    override open func didMoveToSuperview() {
        super.didMoveToSuperview()
        ContentView.tabBar = self
    }
}

更准确地说，这是在我对VStack应用负填充以使可用空间可用之后开始发生的。

有人知道如何解决此问题吗？

Answer 1

这是因为默认情况下，Text视图是透明的，所以您只看到其下方的滚动视图内容。

这里是可能解决方案的演示

VStack {
    ScrollView {
        ForEach(0..<50) { idx in
            Text("\(idx)")
        }
    }
    Text("Just some text so visualize the overlapping")
        .padding()
        .frame(maxWidth: .infinity)
        .background(Color(UIColor.systemBackground))
        .edgesIgnoringSafeArea(.bottom)
}

另一种可能的替代方法是剪切ScrollView内容

ScrollView {
    ForEach(0..<50) { idx in
        Text("\(idx)")
    }
}
.clipped()

隐藏TabBar时ScrollView在VStack中与Text重叠

1 个答案: