SwiftUI NavigationLink 灰显答案

【问题标题】：SwiftUI NavigationLink greyed outSwiftUI NavigationLink 灰显
【发布时间】：2021-02-14 16:53:26
【问题描述】：

为我的应用程序实现搜索功能后，我希望搜索结果可以点击。因此，我将搜索结果嵌入到导航链接中，但出现了问题。当我尝试搜索对象时，搜索结果显示为灰色，并且导航链接不可点击。

通常看起来像这样（我知道，每个人都知道）

我在 NavigationSearch() 下的代码中实现了搜索结果

重现此错误：使用 Mark van Wijnen 的 NavigationSearch 和他的 Medium article

这个类：

import SwiftUI

struct TracksView2: View {
    
    var tracks: [Track] = tracksData
    @State private var searchText: String = ""
    var filtered : [Track] {
        if searchText.isEmpty {
            return tracks
        } else {
            return tracks.filter({ $0.search(searchText) })
        }
    }
    
        var body: some View {
        NavigationView {
            NavigationSearch(text: $searchText, searchResultsContent: {
                ForEach(filtered, id: \.id) { track in
                    NavigationLink(destination: TrackDetailView(tracks: track)) {
                        TrackRowView(track: track)
                    }
                }
            })
        } //: NAVIGATION
        
    }
}

（并将 TrackDetailView 替换为 EmptyView）

像这样创建一个数据模型：

import SwiftUI

struct Track: Identifiable {
  var id = UUID()
  var title: String
  var headline: String
  var image: String
  var imagebig: String
  var gradientColors: [Color]
  var link: String
  var description: String
  var details: [String]
    
    func search(_ query: String) -> Bool {
        let searchable = [title, headline, description] + details

        return searchable.filter({ $0.contains(query) }).count > 0
    }
}

并使用此示例数据：

import SwiftUI

let tracksData: [Track] = [
  Track(
      title: "Spa-Francorchamps",
      headline: "Die Ardennenachterbahn ist für viele die faszinierenste Rennstrecke überhaupt. ",
      image: "road",
      imagebig: "preview",
      gradientColors: [Color("ColorBlueberryLight"), Color("ColorBlueberryDark")],
      link: "https://www.wikipedia.de/",
      description: """
                Bis
        """,
    details: ["7004m","8,50-18,50m", "21","100m"]
    ),

提前致谢:)

【问题讨论】：

什么是导航搜索？
NavigationSearch只是一个名称，用来描述SearchBar在NavigationBar中可见
需要可复现的例子来调试。
Here 你可以找到 NavigationSearch 类
作为快速检查，我在叠加层中放置了 NavigationLink，但它已被禁用。也许覆盖层没有连接到 NavigationView？您会尝试将 NavigationSearch 移出叠加层吗？如果搜索为空，它可以覆盖 ForEach，因为过滤后的集合包含所有项目。

标签： foreach swiftui uisearchbar swiftui-navigationlink

【解决方案1】：

这是封装在 UIViewRepresentable 中的 UISearchBar，感谢 Tim W Swift UI Contacts。我已经使用它并且它有效。试试看吧？

struct SearchBar: UIViewRepresentable {
    @Binding var text: String
    var placeholder: String?
    
    class Coordinator: NSObject, UISearchBarDelegate {
        
        @Binding var text: String
        
        init(text: Binding<String>) {
            _text = text
        }
        
        func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
            text = searchText
        }
    }
    
    func makeCoordinator() -> SearchBar.Coordinator {
        return Coordinator(text: $text)
    }
    
    func makeUIView(context: UIViewRepresentableContext<SearchBar>) -> UISearchBar {
        let searchBar = UISearchBar(frame: .zero)
        searchBar.delegate = context.coordinator
        
        searchBar.autocapitalizationType = .none // --> here, we make some adjustments to the view so it better fits to our app
        searchBar.searchBarStyle = .minimal
        searchBar.placeholder = placeholder
        
        return searchBar
    }
    
    func updateUIView(_ uiView: UISearchBar, context: UIViewRepresentableContext<SearchBar>) {
        uiView.text = text
    }
}

【讨论】：