代码之家  ›  专栏  ›  技术社区  ›  Rob N

SwiftUI是否有一个带有键入功能的选择器来过滤大列表?

  •  0
  • Rob N  · 技术社区  · 5 年前

    我想知道我是否需要自己构建这个,或者我是否可以使用SwiftUI(或AppKit) NSViewRepresentable )已经有类似的东西了。这是一个macOS应用程序。

    用户需要从一个非常大的列表中进行选择。在下面的例子中,我使用了动物的名字。有几十个,也许一百个项目。他们可以键入一些字符来缩小列表。然后,他们可以单击任何项目进行选择,或者单击return选择突出显示的项目,这可能是列表中的第一个项目,也可能是最近使用的项目。

    0 回复  |  直到 5 年前
        1
  •  0
  •   AlbertUI    5 年前

    用SwiftUI编写的单个过滤列表:

    let animals = ["Cat", "Camel", "Dog", "Crocodile"]
    
    struct ContentView: View {
        
        @State private var searchString = ""
        
        var body: some View {
            VStack {
                TextField("Search", text: $searchString)
                List(animals.filter({searchString == "" ? true : $0.contains(searchString)}), id: \.self) { animal in
                    Text(animal)
                }
            }
        }
    }
    

    您可以根据需要增加模型的复杂性,并应用列表选择(请参阅SwiftUI的文档)。要支持选择,请执行以下操作:

    struct ContentView: View {
        
        @State private var searchString = ""
        @State private var listSelection: String? = ""
        
        var body: some View {
            VStack {
                TextField("Search", text: $searchString)
                
                List(animals.filter({searchString == "" ? true : $0.contains(searchString)}), id: \.self, selection: $listSelection) { animal in
                    
                    Text(animal)
                    
                }
            }.padding()
            .onChange(of: searchString, perform: { value in
                listSelection = animals.filter({searchString == "" ? true : $0.contains(searchString)}).first
            })
        }
    }