如何让SwiftUI TabView内容背景透明以显示底层WKWebView

问题现象 #

使用SwiftUI的TabView时，所有标签页复用同一个WKWebView实例，出现以下异常：

• 点击标签页时仅触发刷新动画，但不会加载新的颜色页面；
• 返回已访问过的标签页时，WebView显示空白。

背后机制解析 #

1. 视图生命周期冲突：SwiftUI的TabView会管理标签页视图的生命周期，未选中的标签页视图会被从视图树中移除。当同一个WKWebView实例在不同标签页间切换时，其UIKit层级的父视图会频繁变更，导致WebView的渲染上下文丢失，最终出现空白。
2. 实例复用导致无新初始化：你在ContentView的初始化方法中创建了唯一的RandomColorHostedWebView实例，所有标签页共享该实例。切换标签时不会触发UIViewRepresentable的init或makeUIView方法，因此不会重新加载新页面。
3. 旧透明方案失效：iOS新版本调整了TabView的背景渲染逻辑，仅通过Color.clear加自定义背景无法实现完全透明，必须修改系统TabBar的外观配置。

解决方案 #

方案1：共享单个WKWebView（符合核心需求） #

通过ZStack将WebView置于底层，TabView仅作为底部导航层，同时修改TabBar为透明：

步骤1：设置TabBar透明

extension UITabBar {
    static func makeTransparent() {
        appearance().backgroundColor = .clear
        appearance().shadowImage = UIImage()
        appearance().backgroundImage = UIImage()
    }
}

步骤2：重构ContentView

struct ContentView: View {
    let pages = Page.allCases
    @State private var selectedPage: Page = .settings
    
    init() {
        UITabBar.makeTransparent()
    }
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 共享的WebView，通过绑定监听标签切换
            RandomColorHostedWebView(selectedPage: $selectedPage)
                .edgesIgnoringSafeArea(.all)
            
            // 仅保留TabBar交互，内容为空
            TabView(selection: $selectedPage) {
                ForEach(pages) { page in
                    Color.clear
                        .tag(page)
                        .tabItem {
                            Label(page.rawValue, systemImage: page.rawValue)
                        }
                }
            }
            // 确保TabBar交互优先级高于WebView
            .allowsHitTesting(true)
        }
    }
}

步骤3：优化WebView封装

添加标签切换监听，实现切换时刷新页面：

struct RandomColorHostedWebView: UIViewRepresentable {
    @Binding var selectedPage: Page
    
    func makeUIView(context: Context) -> WKWebView {
        let webConfiguration = WKWebViewConfiguration()
        let webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        loadNewColor(in: webView)
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        // 切换标签时重新加载页面
        loadNewColor(in: uiView)
    }
    
    private func loadNewColor(in webView: WKWebView) {
        let urlRequest = URLRequest(url: URL(string: "https://randomcolour.com")!)
        webView.load(urlRequest)
    }
}

方案2：每个标签页独立WebView（适合不需要共享WebView的场景） #

如果不需要共享单个WebView，直接在每个标签页中创建新实例即可：

struct ContentView: View {
    let pages = Page.allCases
    
    var body: some View {
        TabView {
            ForEach(pages) { page in
                RandomColorHostedWebView()
                    .tag(page)
                    .tabItem {
                        Label(page.rawValue, systemImage: page.rawValue)
                    }
            }
        }
    }
}

额外优化建议 #

• 移除RandomColorHostedWebView初始化中的全局缓存清理，避免每次创建实例都清空缓存，可改为在App启动时执行一次；
• 给WKWebView添加autoresizingMask确保其自适应父视图尺寸，避免布局异常。

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