On my app, I have a tab view. 4 of the tabs are blank pages. No lists or anything. One of them has a list and makes the tab bar translucent because of the scroll function. The problem is, whenever I navigate away from the list page, the translucent tab bar stays. I don't want it to. I want it to go back to transparent. If you look in the Photos app, it does this. It easily goes from transparent to translucent and then back.

    var body: some View {
    TabView(selection: $selectedTab) {
                Schedule()
                    .tag(Tab.schedule)
                    .tabItem {
                        Label("Schedule", systemImage: "calendar")
                    }

                Messaging()
                    .tag(Tab.messaging)
                    .tabItem {
                        Label("Messaging", systemImage: "bubble.left")
                    }
                Dashboard()
                    .tag(Tab.home)
                    .tabItem {
                        Label("Dashboard", systemImage: "note")
            }
                Resources()
                    .tag(Tab.resources)
                    .tabItem {
                        Label("Resources", systemImage: "folder")
                    }
                MailViewTest()
                    .tag(Tab.settings)
                    .tabItem {
                        Label("Settings", systemImage: "gear")
            }
    }

Link to video

If you look at this video, I show how it stays, but when I scroll past the list, it goes away.

CodePudding user response：

Try to reset TabView, like

TabView(selection: $selectedTab) {
    // other code
}
.id(selectedTab)       // << here !!