在 iOS 15 上的 VStack 中，TabView 背景透明度无法正常工作

Posted 2023-02-23

【中文标题】在 iOS 15 上的 VStack 中，TabView 背景透明度无法正常工作

【英文标题】：TabView background transparency doesn't work as expected with ScrollView inside VStack on iOS 15

【发布时间】：2021-12-08 14:15:24

【问题描述】：

我正在手动绘制导航栏，所以我将屏幕内容放在VStack 中。

除了导航标题，还有一个表格。我正在使用ScrollView+LazyVStack，但是切换到Table并不能解决问题。

这是一个示例代码：

TabView 
    VStack 
        Text("Title")
        ScrollView 
            LazyVStack 
                ForEach(0..<100, id: \.self) 
                    Text("cell \($0)")
                
            
        
    .tabItem 
        Image(systemName: "1.square.fill")
        Text("First")
    

在 ios 14 上，这可以按预期工作：

但在 iOS 15 上，背景始终是透明的：

这个问题似乎与UITabBar的新滚动边缘行为有关，它应该在滚动视图到达末尾时隐藏背景。

我知道我可以使用 UITabBar.appearance().scrollEdgeAppearance 禁用它，但我想找到一种方法让它保持启用状态并正常工作。

【问题讨论】：

我不得不假设这只是一个 SwiftUI 错误。可能LazyVStack 不知道它的真实高度，因此它可能不正确地知道终点在哪里？

不清楚你想要什么 - 它是已知的新外​​观默认行为，它是已知的解决方案，我们所有人都为 iOS 15+ 所做的，你也知道，所以什么是有问题吗？

这似乎是@Asperi 所述的预期行为。您是否尝试过创建自定义导航栏？

【参考方案1】：

您应该在滚动视图中清晰地剪辑内容视图。

struct DemoView: View 
//    init()  // This works 100%
//        UITabBar.appearance().isTranslucent = false
//    
    var body: some View 
        TabView 
            VStack 
                Text("Title")
                ScrollView 
                    LazyVStack 
                        ForEach(0..<100, id: \.self) 
                            Text("cell \($0)")
                        
                    
                
            
            .background(Color.blue) // remove this after test
            .clipped() // BUT HERE IS THE SOLUTION
            .tabItem 
                Image(systemName: "1.square.fill")
                Text("First")
            
        
    

滚动视图的这种新行为可能会影响到顶部的导航栏。希望这会有所帮助。

【讨论】：

谢谢，@ngbaanh。我喜欢你的解决方案。它并不完美，因为（如您所说）它会影响顶部导航。 tabview 看起来也有点不同，因为我们在半透明选项卡后面没有内容。但仍然比没有任何背景的标签好得多。我认为在 ScrollView 上添加 .clipped() 也很好，而不是 VStack 级别。并去除蓝色背景后。只是 ScrollView 被剪裁了，tab 的背景是白色的，top nav 不受影响。

并且在 NavigationBar 或 TabBar 后面滚动内容时会有模糊效果（如果滚动图像而不是文本则很明显）。因此，如果您在滚动视图中剪辑了内容，您可能会失去这种效果。

是的，是的。但至少它不会用标题剪辑顶部栏。如果您有一个分组列表，则视图的背景是灰色的。并且剪裁整个 VStack 可能会剪裁标题后面的灰色背景。无论如何，并不完美，但很好的解决方法。很高兴知道几乎没有选择及其局限性。再次感谢