macos - SwiftUI:WKWebView 在 macOS 上截断页面内容 (NSViewRepresentable)

Question

我有一个基本的 NSViewRepresentable WKWebView 的实现，用于 macOS 上的 SwiftUI 应用程序。 UIViewRepresentable等效在 iOS 上工作正常，但在 macOS(原生，不是 Catalyst)上，顶部内容总是被切断。

丢失的数量总是等于父 View (例如选项卡 View )及其填充的大小，这表明 web View 不断将其内容缩放到窗口大小，而不是 View 大小。

例如，这个页面:



...应如下(如 Chrome 所示)。整个导航栏都被裁剪掉了(虽然侧面似乎没有受到影响)。



对于如何解决这个问题，有任何的建议吗？有趣的是，如果我在选项卡之间来回切换，内容会正确显示约 1 秒，然后调整内容大小使其再次被切断。这让我觉得 updateNSView 中需要一些东西方法，但我不确定是什么。

似乎与讨论的问题类似 here ，但那是针对基于 IB 的应用程序的，我看不到将其应用于 SwiftUI 的方法。

使用的代码如下。注意:Web View 作为一个属性保留，因此它可以被其他方法引用(例如触发页面加载、刷新、返回等)

public struct WebBrowserView {

    private let webView: WKWebView = WKWebView()

    // ...

    public func load(url: URL) {        
        webView.load(URLRequest(url: url))
    }

    public class Coordinator: NSObject, WKNavigationDelegate, WKUIDelegate {

        var parent: WebBrowserView

        init(parent: WebBrowserView) {
            self.parent = parent
        }

        public func webView(_: WKWebView, didFail: WKNavigation!, withError: Error) {
            // ...
        }

        public func webView(_: WKWebView, didFailProvisionalNavigation: WKNavigation!, withError: Error) {
            // ...
        }

        public func webView(_: WKWebView, didFinish: WKNavigation!) {
            // ...
        }

        public func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
            // ...
        }

        public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
            decisionHandler(.allow)
        }

        public func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
            if navigationAction.targetFrame == nil {
                webView.load(navigationAction.request)
            }
            return nil
        }
    }

    public func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
}


#if os(macOS) // macOS Implementation (iOS version omitted for brevity)
extension WebBrowserView: NSViewRepresentable {

    public typealias NSViewType = WKWebView

    public func makeNSView(context: NSViewRepresentableContext<WebBrowserView>) -> WKWebView {

        webView.navigationDelegate = context.coordinator
        webView.uiDelegate = context.coordinator
        return webView
    }

    public func updateNSView(_ nsView: WKWebView, context: NSViewRepresentableContext<WebBrowserView>) {

    }
}
#endif

用法示例:

struct BrowserView: View {

    private let browser = WebBrowserView()

    var body: some View {
        HStack {
            browser
                .onAppear() {
                    self.browser.load(url: URL(string: "https://stackoverflow.com/tags")!)
                }
        }
        .padding()
    }
}

struct ContentView: View {

    @State private var selection = 0

    var body: some View { 
        TabView(selection: $selection){
            Text("Email View")
                .tabItem {
                    Text("Email")
                }
                .tag(0)
            BrowserView()
                .tabItem {
                    Text("Browser")
                }
                .tag(1)
        }
        .padding()
    }
}

Answer 1

我在使用 SwiftUI 的 MacOS 应用程序中遇到了与 WKWebView 完全相同的问题。

对我有用的解决方案是使用 GeometryReader 来获取确切的高度，并将 web View 放在 ScrollView 中(我相信它与布局优先级计算有关，但还无法触及它的核心) .

这是对我有用的片段，也许它也适用于你

GeometryReader { g in
    ScrollView {
        BrowserView().tabItem {
            Text("Browser")
        }
        .frame(height: g.size.height)
        .tag(1)

    }.frame(height: g.size.height)
}