NavigationView 下的 SwiftUI WKWebView 不接受 displayMode答案

【问题标题】：SwiftUI WKWebView below NavigationView not accepting displayModeNavigationView 下的 SwiftUI WKWebView 不接受 displayMode
【发布时间】：2020-03-19 22:23:20
【问题描述】：

我创建了一个 tabview，其中第一个选项卡包含一个 WKWebView

struct WebView : UIViewRepresentable {
    let urlString : String

    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(URLRequest.init(url: URL.init(string: urlString)!))
    }
}

webview使用如下：

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
        TabView(selection: $selection){
            NavigationView {
                WebView(urlString: "...")
                .navigationBarTitle("Intérieur", displayMode: .large)
            }
            .tabItem {
                VStack {
                    Image(systemName:"...")
                        .foregroundColor(Color("brownGrey"))
                    Text("...")
                        .foregroundColor(Color("brownGrey"))
                }
            }.tag(0)

但是无论我怎么尝试，我都不能强迫NavigationView留在displayMode: .large

导航栏进入小模式，直到我滚动 webview 的内容，然后它变成大模式。

如果我在上面的代码中用简单的Text("...") 替换 webview，它会按预期工作。在 webview 上方插入 Text("...") 也可以，但我想在不引入人工垫片的情况下这样做。

这是启动应用程序时发生的情况：

标题正常显示，而 webview 的内容正在加载：

加载内容后，NavigationView 会减小其大小：

如果我拉下 webview 并放开 NavigationView 显示我希望它显示的方式：

在我看来，系统检测到它是导航栏下方的WKWebview 并因此调整其行为时发生了一些神奇的事情。

有什么解决办法吗？

【问题讨论】：

所以基本上你只是想强制大标题？
是的。至少在用户开始滚动网页之前
看看我的回答，乔里斯。

标签： ios swiftui wkwebview

【解决方案1】：

在VStack 中添加WebView 以及ZStack（带有显式框架）和具有纯色作品的Color。

var body: some View {
    TabView(selection: $selection){
        NavigationView {
            VStack {
                ZStack {
                    Color(.gray)
                }.frame(width: 1, height: 1, alignment: .center)
                WebView(urlString: "https://prettyitgirl.blogspot.com/")
            }.navigationBarTitle("PrettyItGirl.com", displayMode: .large)
        }
...

不提供显式框架将为您提供自动调整大小的ZStack。

【讨论】：