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

Posted 2023-02-24

【中文标题】隐藏 TabBar 时，ScrollView 与 VStack 中的文本重叠

【英文标题】：ScrollView overlaps Text in VStack when hiding TabBar

【发布时间】：2020-07-18 12:43:50

【问题描述】：

目前我正在开发一个多标签应用程序，因此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 以使可用空间可用之后开始发生。

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

【参考方案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()

【讨论】：

我已经尝试使用背景颜色进行修复，但由于内容仍在文本后面，因此会导致其他问题。 '.clipped()' 是一个很好的解决方案，现在我想知道为什么我自己没有想出它。我想只有在应用了负填充或文本的底部填充低于某个数字时才会发生这种情况，这让我感到困惑。谢谢