IOSAppでのYouTube検索画面で余白が生じる

Question

現在swiftでYouTube検索機能がついたAppを作成中です。

swiftUI→storyboardに反映している状態なのですが
画面下に余白が生まれてしまいます。

storyboardと根本的に違うと思われるので
苦戦しております。

コードはこちらです。

import SwiftUI
import URLImage

struct VideoRowView: View {
	@State var title: String
	let imgURL: String
	@State var description: String
	
    var body: some View {
		HStack{
			URLImage(URL(string: imgURL)!) {proxy in
				proxy.image
					.resizable()
					.scaledToFit()
			}
			.frame(width: 120, height: 90)
			.border(Color.yellow)
			VStack{
				Text(title)
					.font(.headline)
				Text(description)
					.font(.caption)
					.lineLimit(3)
			}			
		}
    }
}

struct VideoRowView_Previews: PreviewProvider {
    static var previews: some View {
		VideoRowView(title: "これはタイトル", imgURL: "https://o2-m.com/dog1.png", description: "これは動画の説明です。これは動画の説明です。これは動画の説明です。これは動画の説明です。これは動画の説明です。これは動画の説明です。これは動画の説明です。これは動画の説明です。")
    }
}

import SwiftUI


let vc = UIStoryboard(name: "ContentViewHostingController", bundle: nil).instantiateViewController(identifier: "ContentViewHostingController")



struct ContentView: View {
    @State var results:Results?
    @State private var keyword = "筋トレ"
    @ObservedObject var searcher = YoutubeSearcher()
    
    var body: some View {
        NavigationView {
            VStack {
                HStack {
                    TextField("検索文字列", text: $keyword)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .padding()
                    Button(action: {
                        self.searcher.search(keyword: self.keyword)
                    }) {
                        Text("検索")
                    }
                    .background(
                        Capsule()
                            .foregroundColor(.yellow)
                            .frame(width: 60, height: 30))
                        .padding(20)
                }
                
                Spacer()
                if self.searcher.results != nil {
                    List {
                        ForEach(self.searcher.results!.items) {item in
                            NavigationLink(destination: YoutubeView(url: "https://www.youtube.com/watch?v=" + item.vid.videoId)) {
                                VideoRowView(title: item.snippet.title, imgURL: item.snippet.thumbnails.default.url, description: item.snippet.description)
                            }
                        }
                    }	
                }
            }
            .navigationBarTitle("検索結果")
            .navigationBarHidden(true)
        }
    }	
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        
        ContentView()
    }
}


class ContentViewHostingController: UIHostingController<ContentView> {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder, rootView: ContentView())

    }

    override func viewDidLoad() {
        super.viewDidLoad()

    }
}

import Foundation

class YoutubeSearcher: ObservableObject {
	@Published var results:Results?
	// 最大検索数
	let maxResults = "10"
	// APIKeyを設定
	let APIKey = "AIzaSyAR14hihGDq5-Av9LYvFiK-sJM5sfBF8sw"

	func search(keyword: String) ->() {
		// リクエスト用の文字列を生成
		guard let urlStr = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=(keyword)&type=video&maxResults=(maxResults)&key=(APIKey)".addingPercentEncoding(withAllowedCharacters: NSCharacterSet.urlQueryAllowed) else {
				fatalError("URL String error")
		}
		// URLに変換する
		guard let url = URL(string:urlStr) else {
			fatalError("Could'nt convert to url: (urlStr)")
		}
		
		// Youtube APIにリクエストを送る
		let task = URLSession.shared.dataTask(with: url) { data, response, error in
			if let jsonData = data {
				let decodedData: Results
				do {
					decodedData = try JSONDecoder().decode(Results.self, from: jsonData)
				} catch {
					fatalError("Couldn't decode JSON data.")
				}
				// メインスレッドで実行
                DispatchQueue.main.async {
					self.results = decodedData
                }
			} else {
				fatalError("Youtube API request error")
			}
		}
		task.resume()
	}	
}

import SwiftUI
import WebKit

struct YoutubeView: UIViewRepresentable {
	var url: String
	
	func makeUIView(context: Context) -> WKWebView {
		return WKWebView()
	}
	
	func updateUIView(_ uiView: WKWebView, context: Context) {
		uiView.load(URLRequest(url: URL(string: url)!))
	}
}

struct YoutubeView_Previews: PreviewProvider {
	static var previews: some View {
		YoutubeView(url: "https://www.rutles.net")
	}
}

＜試した事＞
https://qiita.com/tsuzuki817/items/6c0f428fccbaca9927ed
http://swift.hiros-dot.net/?p=1013

上記のサイトを参考に試したのですが
画面全体に対する変更ではない？
と思われるため変更されませんでした・・・

swiftUIに詳しい方、よろしくお願い致します。

Comments

[TsukubaDepot]

これはどちらかというと SwiftUI の話題なので、タグは SwiftUI にした方がいいかもしれません。

[KCROW]

お世話になっております。
確かにそうですね、ありがとうございます！

Answer 1

viewcontrollerのunder Opaque Barsにチェックをつけた所、余白が消えました。

初歩的な事でしたので、勉強を重ねます。
https://qiita.com/ux_design_tokyo/items/75cbd122651f470a84f3