如何使用 SwiftUI 去除 WKWebView 上方的空白

Question

I am building WKWebViews into my SwiftUI app. I am using the following implementation:

struct UrlWebView: UIViewRepresentable {
    typealias UIViewType = WKWebView
    
    
    
    var urlToDisplay: URL
    
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        
        webView.load(URLRequest(url: urlToDisplay))
        
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        
    }
}


struct WebView: View {
    var game: Game
    
    var body: some View {
        UrlWebView(urlToDisplay: game.url)
    }
}

initiated by

 NavigationLink(destination: WebView(game: game))

There is some strange behavior that happens when I scroll where there is white space under the navigation header and above the web page...

iOS sim in WKWebView with white space

How can I get rid of the white space on top of the WKWebView (WHEN I SCROLL DOWN) while still keeping it scrollable?

Thank you so much.

EDIT: When I swipe down, there is no bounce back. Do you know how to fix this?

Answer 1

I tested out your code, but I am not sure which white space you are referring to because I did not find anything beside a full WebView() on screen and the system back button.

However, if you are using Xcode version 13 and below, you can try this, and let me know if the white space disappear after.

struct WebView: View {
var body: some View {
    NavigationView {
        NavigationLink {
            GameTabView(urlToDisplay: URL(string: "https://stackoverflow.com/questions/72665439/how-to-get-rid-of-white-space-above-wkwebview-with-swiftui")!)
                .navigationBarHidden(true)
        } label: {
            Text("Open")
        }
    }
}
}