首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在SwiftUI中使用搜索栏过滤对象数组?

在SwiftUI中使用搜索栏过滤对象数组可以通过以下步骤实现:

  1. 创建一个包含对象的数组,该对象具有需要过滤的属性。例如,假设我们有一个名为Person的结构体,具有nameage属性。
代码语言:txt
复制
struct Person {
    let name: String
    let age: Int
}
  1. 在视图中创建一个@State属性来存储搜索关键字和过滤后的结果。
代码语言:txt
复制
@State private var searchText = ""
@State private var filteredPersons: [Person] = []
  1. 在视图的body中,添加一个TextField作为搜索栏,并将搜索关键字绑定到searchText属性。
代码语言:txt
复制
TextField("Search", text: $searchText)
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .padding()
  1. 使用filter方法对对象数组进行过滤,将过滤后的结果存储在filteredPersons属性中。
代码语言:txt
复制
filteredPersons = persons.filter { person in
    return person.name.localizedCaseInsensitiveContains(searchText)
}

上述代码中,persons是包含所有对象的数组。

  1. 在视图中使用ForEach循环遍历过滤后的结果,并显示每个对象的属性。
代码语言:txt
复制
List(filteredPersons, id: \.self) { person in
    Text(person.name)
    Text("\(person.age)")
}

完整的示例代码如下:

代码语言:txt
复制
import SwiftUI

struct ContentView: View {
    struct Person {
        let name: String
        let age: Int
    }
    
    let persons = [
        Person(name: "John", age: 25),
        Person(name: "Jane", age: 30),
        Person(name: "Alice", age: 35)
    ]
    
    @State private var searchText = ""
    @State private var filteredPersons: [Person] = []
    
    var body: some View {
        VStack {
            TextField("Search", text: $searchText)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            
            List(filteredPersons, id: \.self) { person in
                Text(person.name)
                Text("\(person.age)")
            }
        }
        .onAppear {
            filteredPersons = persons
        }
        .onChange(of: searchText) { newValue in
            filteredPersons = persons.filter { person in
                return person.name.localizedCaseInsensitiveContains(searchText)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这样,当用户在搜索栏中输入关键字时,列表将根据关键字过滤并显示匹配的对象。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 领券