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

Question

我正在手动绘制导航栏，所以我将屏幕内容放在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 禁用它，但我想找到一种方法让它保持启用状态并正常工作。

Answer 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")
            }
        }
    }
}

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