时间戳

首页 > 解决方案 > NavigationLink 不适用于 SwiftUI 3.0 上的新 .searchable 修饰符

swift - NavigationLink 不适用于 SwiftUI 3.0 上的新 .searchable 修饰符

问题描述

我正在尝试 Apple WWDC21 上介绍的 SwiftUI 3.0 的新功能。

特别是我正在尝试使用.searchable修饰符在列表中实现搜索栏，并让用户使用NavigationLink.

struct OrderItem : Identifiable {
    let id = UUID()
    var label : String
    var value : Bool = false
}

struct BindingTest: View {
    @State var items = [OrderItem(label: "Shirts"), OrderItem(label: "Pants"), OrderItem(label: "Socks")]
    @State private var searchedText = ""
    
    @ViewBuilder
    var body: some View {
        
        NavigationView {
            
            List($items) { $item in
                NavigationLink(destination: ItemView(item: $item)) {
                    HStack {
                        if(item.value) {
                            Image(systemName: "star.fill").foregroundColor(.yellow)
                        }
                        Text(item.label)
                    }
                }
            }.navigationBarTitle("Clothing")
            
            // Search bar
                .searchable(text: $searchedText, placement: .automatic) {
                    if searchedText != "" {
                        
                        // Search result
                        ForEach($items.filter({$0.label.wrappedValue.contains(searchedText)})) { $item in
                            
                            NavigationLink(destination: ItemView(item: $item)) {
                                HStack {
                                    if(item.value) {
                                        Image(systemName: "star.fill").foregroundColor(.yellow)
                                    }
                                    Text(item.label)
                                }
                            }.searchCompletion(item.label)
                            
                        }
                    }
                }
            
        }
    }
}

但是当我在搜索结果列表中并点击一个结果时，NavigationLink它不起作用，它会显示原始列表。还有其他人遇到这个问题吗？

我无法上传视频，但这是搜索结果视图，正如我所说，当我点击一个结果时，NavigationLink 不起作用

[编辑] 我在 .searchable 里面检查了这个 NavigationLink 不起作用，但不幸的是它没有回答我的问题，因为我NavigationLink已经在 .searchable 里面了NavigationView。

标签： swiftswiftuisearchable

解决方案

您在这里有两个导航链接，一个在您的原始内容中，一个作为闭包传递给您的可搜索修饰符，它实际上在 searchText 更改时显示。后者不在导航视图内，因此无法导航到第二个屏幕。为了达到您的期望，您应该ForEach在NavigationLink原始内容本身中添加 ，并根据搜索文本过滤列表。

搜索完成应该是完成 searchText 的指导，而不是导航到第二个屏幕。

更新后的代码应该是这样的

struct BindingTest: View {
@State var items = [OrderItem(label: "Shirts"), OrderItem(label: "Pants"), OrderItem(label: "Socks")]
@State private var searchedText = ""

@ViewBuilder
var body: some View {
    NavigationView {
        List($items.filter({$0.label.wrappedValue.contains(searchedText)})) { $item in
            NavigationLink(destination: ItemView(item: $item)) {
                HStack {
                    if(item.value) {
                        Image(systemName: "star.fill").foregroundColor(.yellow)
                    }
                    Text(item.label)
                }
            }
        }
        .searchable(text: $searchedText, placement: .automatic) {
            if searchedText != "" {
                ForEach($items.filter({$0.label.wrappedValue.contains(searchedText)})) { $item in
                    Text(item.label).searchCompletion(item.label)
                }
            }
        }
    }
}

}

希望它能回答你的问题:)

推荐阅读