Question

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

但是，我在尝试在固定的.inline导航栏中实现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

复制并粘贴上面的代码，让我知道是否可以尝试使用其他方法来改进我的解决方案。我只是为了调试而将绿色和黄色的视图涂上了几色。

Answer 2

  NavigationView {
        GeometryReader { geometry in

            ZStack {
                Text("Hello")
            }
            .navigationBarTitle(" ", displayMode: .inline)
            .navigationBarItems(leading:
                HStack {
                    TextField("Seach for products, brands and more", text: self.$searchText)
                }
                .frame(width: geometry.size.width - 35,
                       height: 38,
                       alignment: .center)
                    .background(Color.white)
            )
            .background(NavigationConfigurator { nc in
                nc.navigationBar.barTintColor = UIColor(red: 104.0/255.0, green: 194.0/255.0, blue: 25.0/255.0, alpha: 1.0)
            })
        }
    }
    .navigationViewStyle(StackNavigationViewStyle())


struct NavigationConfigurator: UIViewControllerRepresentable {
    var configure: (UINavigationController) -> Void = { _ in }

    func makeUIViewController(context: UIViewControllerRepresentableContext<NavigationConfigurator>) -> UIViewController {
        UIViewController()
    }
    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
        if let nc = uiViewController.navigationController {
            self.configure(nc)
        }
    }
}

Answer 3

有 a new method in iOS 14+ 用指定的项目填充工具栏或导航栏：

func toolbar<Content>(content: () -> Content) -> some View where Content : ToolbarContent

使用SwiftUI将TextField添加到NavigationBar

3 个答案: