TabView background transparency doesn't work as expected with ScrollView inside VStack on iOS 15

user_3585796 0
Viewed 390

I'm drawing the navigation bar manually so I place content of the screen inside VStack.

Besides the navigation title, there's a table. I'm using ScrollView+LazyVStack, but switching to Table doesn't solve the problem.

Here's a sample code:

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

On iOS 14 this works as expected:

But on iOS 15 background is always transparent:

This problem seems to be related to the new scroll edge behavior of the UITabBar, which is supposed to hide the background when the scrolling view reaches the end.

I know I can disable it with UITabBar.appearance().scrollEdgeAppearance, but I would like to find a way to leave it enabled and working.

swiftui swift ios
1 Answers

You should clerly clip the content view inside a scrollview.

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

This new behavior of scrollview may affect to navigationbar on the top. Hope this helps.

user_49744970
Related