swift - 使用 SwiftUI 将 TextField 添加到 NavigationBar

Question

在过去的几个小时里，我一直在研究 Xcode 11 和 SwiftUI，试图在 NavigationBar 中实现一个 TextField。通常，我构建的第一个“Hello, World”类型的应用程序是一个简单的 Web 浏览器:TextField 和 WKWebView。

但是，我在尝试在固定的 .inline NavigationBar 中实现 TextField 时遇到了异常困难的问题。此外，我似乎无法在网上的任何地方找到单个教程或一段代码。我浏览了 Google 的页面和页面，以及 GitHub 上的项目，但没有成功。

唯一具体提到这个主题的结果是 Reddit 线程和论坛讨论帖子——所有这些都问同一个问题:“有没有人能够在 NavigationBar 中成功实现 TextField？”还没有人回应解决方案。

这是我当前的 ContentView.swift – 我已经删除了所有以编程方式实现 TextField 的尝试，因为它要么崩溃要么抛出错误:

import SwiftUI
import WebKit

let address = "https://developer.apple.com"

struct ContentView: View {
    var body: some View {

        NavigationView {
            VStack {
                WebView(request: URLRequest(url: URL(string: address)!))
                    .edgesIgnoringSafeArea(.bottom)
                    .edgesIgnoringSafeArea(.leading)
                    .edgesIgnoringSafeArea(.trailing)
            }

            .navigationBarTitle("TextField Placeholder", displayMode: NavigationBarItem.TitleDisplayMode.inline)

        }
    }
}

struct WebView: UIViewRepresentable {
    let request: URLRequest

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

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(request)
    }
}

Answer 1

我不知道这是否正是您要实现的目标，我认为这可能是一个很好的解决方案:

import SwiftUI
import WebKit

let address = "https://developer.apple.com"

struct ContentView: View {
    @State private var text = ""

    var body: some View {
        NavigationView {
            GeometryReader { geometry in
                VStack {
                    WebView(request: URLRequest(url: URL(string: address)!))
                        .edgesIgnoringSafeArea(.bottom)
                        .edgesIgnoringSafeArea(.leading)
                        .edgesIgnoringSafeArea(.trailing)
                }
                .navigationBarItems(leading:
                    HStack {
                        TextField("Type something here...", text: self.$text)
                            .background(Color.yellow)
                    }
                    .padding()
                    .frame(width: geometry.size.width)
                    .background(Color.green)
                )
            }
        }
    }
}

struct WebView: UIViewRepresentable {
    let request: URLRequest

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

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(request)
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

复制粘贴上面的代码，让我知道是否可以尝试用其他方法改进我的解决方案。为了调试，我给几个绿色和黄色的 View 涂上了颜色。