SwiftUI iOS15下TabView内嵌List时导航栏透明度不更新问题

问题原因 #

这是iOS 15 SwiftUI的已知系统Bug，问题出在视图层级结构上：你将TabView嵌套在了NavigationView内部，导航栏由外层统一管理，切换Tab时系统不会主动触发导航栏对当前Tab下List滚动位置的重新检测，因此背景状态无法正确更新。iOS 14因为导航栏默认是不透明的，所以没有暴露这个问题。

适配方案（保留原生导航栏透明度特性） #

只需要调整视图层级，把NavigationView放到每个TabItem的内部，而不是将整个TabView套在NavigationView里，让每个Tab独立管理自己的导航栏，切换Tab时系统就能正确检测对应List的滚动状态：

struct Main: View {
    var body: some View {
        WindowGroup {
            // TabView调整到最外层，NavigationView移到每个Tab内部
            TabView {
                NavigationView {
                    TabElement()
                }
                .tabItem {
                    Image(systemName: "star.fill")
                    Text("dummy")
                }
                
                NavigationView {
                    TabElement()
                }
                .tabItem {
                    Image(systemName: "star.fill")
                    Text("dummy")
                }
                // 剩余Tab按照同样逻辑配置即可
            }
        }
    }
}

// TabElement移除tabItem相关配置，仅保留页面内容和导航栏配置
struct TabElement: View {
    var body: some View {
        List {
            Text("empty")
            Text("empty")
            // 其余文本省略
        }
        .listStyle(InsetGroupedListStyle())
        .navigationBarTitle(Text("Main"), displayMode: .inline)
        .navigationBarBackButtonHidden(true)
    }
}

如果不想重复编写每个Tab的NavigationView配置，可以封装通用的Tab容器简化代码：

struct TabContainer<Content: View>: View {
    let content: Content
    let tabTitle: String
    let tabIcon: String
    
    init(tabTitle: String, tabIcon: String, @ViewBuilder content: () -> Content) {
        self.tabTitle = tabTitle
        self.tabIcon = tabIcon
        self.content = content()
    }
    
    var body: some View {
        NavigationView {
            content
                .navigationBarTitle(Text("Main"), displayMode: .inline)
                .navigationBarBackButtonHidden(true)
        }
        .tabItem {
            Image(systemName: tabIcon)
            Text(tabTitle)
        }
    }
}

// 简化后的TabView调用示例
TabView {
    TabContainer(tabTitle: "dummy", tabIcon: "star.fill") {
        TabElement()
    }
    TabContainer(tabTitle: "dummy2", tabIcon: "heart.fill") {
        TabElement()
    }
}

内容的提问来源于stack exchange，提问作者lcpr_phoenix