隐藏 TabBar 时，ScrollView 与 VStack 中的文本重叠

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()