主页 / coding / 问题 / 79591764
Accepted
CalebK
Asked: 2025-04-25 11:33:24 +0800 CST

使 TabView 内容背景透明，以便可以在其后面显示“常量”UIViewRepresentable WKWebView

  • 772

我正在创建一个应用，其主 UI 是 WKWebView，SwiftUI 仅用于应用的零散部分。我在使用 SwiftUI 系统 UI 时遇到了一些问题TabView。运行此示例应用时，出现了一些我无法解释的行为。

enum Page: String, Hashable, CaseIterable, Identifiable {
    case settings = "gear"
    case radio = "radio"
    case connect = "dot.radiowaves.right"
    
    var id: String { rawValue }
}

struct RandomColorHostedWebView: UIViewRepresentable {
    let webView: WKWebView
    
    init() {
        // Clear cache to be extra sure https://stackoverflow.com/a/34376943/3833632
        WKWebsiteDataStore.default().removeData(ofTypes: [WKWebsiteDataTypeDiskCache, WKWebsiteDataTypeMemoryCache], modifiedSince: Date(timeIntervalSince1970: 0), completionHandler:{ })
        let webConfiguration = WKWebViewConfiguration()
        self.webView = WKWebView(frame: .zero, configuration: webConfiguration)
        let urlRequest = URLRequest(url: URL(string: "https://randomcolour.com")!)
        self.webView.load(urlRequest)
    }
    
    func makeUIView(context: Context) -> UIView {
        return webView
    }

    func updateUIView(_ uiView: UIView, context: Context) {
    }
}



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

运行此程序，你会发现每次点击标签页都会触发刷新动画，但不会加载新的颜色。此外，当你返回之前访问过的标签页时，页面会显示空白。

我无法解释这种现象。 （我很想知道为什么会发生这种情况）

话虽如此，我假设原因是 SwiftUI 不知道每个 tabItem 父视图都是相同的视图，因为它们具有不同的结构标识。

因此，我只能寻找一种解决方法，要么使 TabView 的背景清晰，以便我可以使用ZStack，要么将TabView高度限制为仅限选项卡内容，以便我可以使用VStack，或者其他方法。

现有的解决方案尝试移除 TabView 的背景，但似乎无效。我同意一位评论者的观点，即该解决方案在更高版本的操作系统中似乎已失效。

   var body: some View {
        ZStack {
            randomColor
            TabView {
                ForEach(pages) { page in
                    Color.clear
                        // https://stackoverflow.com/questions/63178381/make-tabview-background-transparent
                        .background(BackgroundHelper())
                        .tag(page)
                        .tabItem {
                            Label(page.rawValue, systemImage: page.rawValue)
                        }
                }
            }
        }
    }
swiftui

1 个回答

  1. Best Answer

    你的UIViewRepresentable实现不正确。你应该始终在 中返回视图的新实例makeUIView。在当前实现中，你只有一个实例WKWebView。

    当你在标签页之间切换时，SwiftUI 会将其添加WKWebView为不同标签页的子视图。显然，一个标签页UIView只能有一个父视图，因此当你移动到另一个标签页时，它WKWebView会从上一个标签页中移除。当你返回到已访问的标签页时，它WKWebView不会被添加回来，因为 SwiftUI 从一开始就不希望它被移除。

    这是一个更正确的实现：

    struct RandomColorHostedWebView: UIViewRepresentable {
    
    func makeUIView(context: Context) -> UIView {
        WKWebsiteDataStore.default().removeData(ofTypes: [WKWebsiteDataTypeDiskCache, WKWebsiteDataTypeMemoryCache], modifiedSince: Date(timeIntervalSince1970: 0), completionHandler:{ })
        let webConfiguration = WKWebViewConfiguration()
        let webView = WKWebView(frame: .zero, configuration: webConfiguration)
        let urlRequest = URLRequest(url: URL(string: "https://randomcolour.com")!)
        webView.load(urlRequest)
        return webView
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
    }
}

    链接帖子BackgroundHelper中的 可以稍微修改一下，使用UIViewControllerRepresentable- 向上移动UIViewController层级而不是UIView层级。当然，这并不能保证将来不会出现问题。

    struct BackgroundHelper: UIViewControllerRepresentable {
    class HelperVC: UIViewController {
        override func didMove(toParent parent: UIViewController?) {
            super.didMove(toParent: parent)
            var currParent = parent
            while true {
                guard let parent = currParent else {
                    break
                }
                if parent.tabBarController?.viewControllers?.contains(parent) == true {
                    currParent?.view.backgroundColor = .clear
                    parent.tabBarController?.view.backgroundColor = .clear
                    break
                }
                currParent = currParent?.parent
            }
        }
    }
    
    func makeUIViewController(context: Context) -> HelperVC {
        HelperVC()
    }
    
    func updateUIViewController(_ uiViewController: HelperVC, context: Context) {
        
    }
}

    然后你可以写

    ZStack {
    RandomColorHostedWebView()
    TabView {
        ForEach(pages) { page in
            Text("Foo")
                .background { BackgroundHelper() }
                .tag(page)
                .tabItem {
                    Label(page.rawValue, systemImage: page.rawValue)
                }
        }
        .toolbarBackgroundVisibility(.visible, for: .tabBar)
    }
}
.ignoresSafeArea()

    我使用了ignoresSafeArea和toolbarBackgroundVisibility来让它看起来更美观。根据你实际显示的网页内容，你可能不想忽略底部安全区域（例如，你想把网页视图放在标签栏正上方），在这种情况下，你可以这样做：

    @Namespace var ns

// ...

ZStack {
    RandomColorHostedWebView()
        .matchedGeometryEffect(id: "tab", in: ns, isSource: false)
    TabView {
        ForEach(pages) { page in
            // we only want the source of the matched geometry effect to be on the initial tab only, hence this check
            if page == .settings {
                ZStack {
                    Color.clear
                        .matchedGeometryEffect(id: "tab", in: ns, isSource: true)
                    Text("Foo")
                }
                .ignoresSafeArea(edges: [.horizontal, .top])
                .background { BackgroundHelper() }
                .tag(page)
                .tabItem {
                    Label(page.rawValue, systemImage: page.rawValue)
                }
            } else {
                Text("Foo")
                    .background { BackgroundHelper() }
                    .tag(page)
                    .tabItem {
                        Label(page.rawValue, systemImage: page.rawValue)
                    }
            }
        }
        .toolbarBackgroundVisibility(.visible, for: .tabBar)
    }
}
.ignoresSafeArea(edges: [.horizontal, .top])
    • 1

相关问题