Início / coding / Perguntas / 79591764
Accepted
CalebK
Asked: 2025-04-25 11:33:24 +0800 CST

Tornar o fundo do conteúdo do TabView transparente para que um UIViewRepresentable WKWebView "constante" possa ser exibido atrás dele

  • 772

Estou criando um aplicativo em que a interface principal é uma WKWebView e o SwiftUI é usado apenas para algumas funções do aplicativo. Estou com um problema ao usar a interface do sistema SwiftUI TabView. Se você executar este aplicativo de exemplo, haverá um comportamento que não consigo explicar.

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

Se você executar isso, notará que cada aba clicada gera uma animação de atualização, mas não carrega uma nova cor. Além disso, quando você retorna para uma aba que já visitou, ela estará em branco.

Esse é um comportamento que não consigo explicar. (Gostaria de entender por que isso acontece)

Dito isso, presumo que a causa seja que o SwiftUI não tem ideia de que cada uma das visualizações pai do tabItem é a mesma visualização, pois elas têm identidades estruturais diferentes.

Então, estou procurando uma solução alternativa para deixar o fundo do TabView claro para que eu possa usar um ZStack, limitar a TabViewaltura somente para o conteúdo da aba para que eu possa usar um VStack, ou algo mais.

Esta solução existente tenta remover o fundo da TabView, mas parece não funcionar . Concordo com um comentarista que diz que a solução alternativa parece ter sido quebrada em versões posteriores do sistema operacional.

   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 respostas

  1. Best Answer

    Sua UIViewRepresentableimplementação está incorreta. Você deve sempre retornar uma nova instância da visualização em makeUIView. Com a implementação atual, você só tem uma instância de WKWebView.

    Conforme você alterna entre as abas, o SwiftUI as adiciona WKWebViewcomo subvisualizações das diferentes abas. Obviamente, um item UIViewsó pode ter uma visualização pai, então, ao alternar para outra aba, o item WKWebViewé removido da aba anterior. Ao retornar para uma aba visitada, o item WKWebViewnão é adicionado novamente, pois o SwiftUI não espera que ele seja removido.

    Aqui está uma implementação mais correta:

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

    A BackgroundHelperpostagem vinculada pode ser ligeiramente modificada para usar um UIViewControllerRepresentable- subindo na UIViewControllerhierarquia em vez de UIViewhierarquia. É claro que não há garantia de que isso não vá falhar no futuro.

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

    Então você pode escrever

    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()

    Usei ignoresSafeAreae toolbarBackgroundVisibilitypara melhorar a aparência. Dependendo do conteúdo da web que você estiver exibindo, talvez seja interessante ignorar a área inferior segura (ou seja, você deseja posicionar a visualização da web logo acima da barra de guias). Nesse caso, você pode fazer o seguinte:

    @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

relate perguntas