SwiftUI：主从视图中的 SafariView答案

【问题标题】：SwiftUI: SafariView in Master-Detail ViewSwiftUI：主从视图中的 SafariView
【发布时间】：2021-06-16 15:35:01
【问题描述】：

我想在 iPad 上设置的 Master-Detail 视图中的 Detail 视图中显示 SafariView，但我的实现导致 SafariView “下推”。

看图：

我在这篇 SO 帖子中尝试了各种解决方案，但在我的用例中似乎都没有。大多数解决方案都会将 SafariView 推送到整个 Master-Detail 视图（对于此 solution，请参见 gif）或显示工作表 (BetterSafariView)。

struct ItemsListView: View {   
    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    SafariDetailView()
                }
            }
        }
    }
}

struct SafariDetailView: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                Text("Lorem ipsum dolor sit amet".uppercased())
                Text("23 Dec 2021")
            }

            Spacer()

            NavigationLink(
                destination: NormalSafariView(url: URL(string: "https://www.google.com")!),
                label: {
                    EmptyView()
                })
                .frame(width: 0)
        }
    }
}

struct NormalSafariView: UIViewControllerRepresentable {
    
    let url: URL
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<NormalSafariView>) -> SFSafariViewController {
        return SFSafariViewController(url: url)
    }
    
    func updateUIViewController(_ uiViewController: SFSafariViewController, context: UIViewControllerRepresentableContext<NormalSafariView>) {
        
    }
    
}

我的要求要求实现在 iPad 上的 Master-Detail 设置中在详细视图上显示 SafariView，并在 iphone 上显示类似“推送”的过渡。

【问题讨论】：

标签： ios swiftui

【解决方案1】：

其实NormalSafariView的“下推”行为是因为它在NavigationView中，所以默认情况下，它是为你生活的地方（navigationBar），在那里你可以提供一个@ 987654324@，工具栏等

要解决这个问题，一个简单的解决方案是隐藏NormalSafariView 视图的navigationBarHidden。

将您的 NavigationLink 更改为：

 NavigationLink(
                destination: NormalSafariView(url: URL(string: "https://www.google.com")!),
                label: {
                    EmptyView()
                })
                .frame(width: 0)

到：

NavigationLink(
    destination: NormalSafariView(url: URL(string: "https://www.google.com")!)
        .navigationBarHidden(true) // This will completely hide the navigation bar
    ,
    label: {
        EmptyView()
    })
    .frame(width: 0)

另外，你可以使用：

.navigationTitle("Safari View") // Use this if you want a navigation bar with a big title
.navigationBarTitleDisplayMode(.inline) // Combine this with `navigationTitle if you want a navigation bar with small title.

【讨论】：