首页
学习
活动
专区
工具
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()
    }
}

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

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

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

相关·内容

Ask Apple 2022 与 SwiftUI 有关的问答(下)

快速检索数组元素Q:为什么没有简单的方法将 TABLE 选择的行映射到提供表内容的数组元素上?似乎唯一的方法是在数组搜索匹配的 id 值,这对于大表来说似乎效率很低。...Swiftcord[12] 的代码展示了如何在 SwiftUI 下实现倒置列表。阅读 优化在 SwiftUI List 显示大数据集的响应效率[13] 一文,了解苹果工程师推荐的方法。...在 SwiftUI 4 ,可以使用 .scrollContentBackground(.hidden) 隐藏列表的默认背景searchableQ:是否有办法在.searchable() 修饰器以编程方式设置搜索字段的焦点...A:你可以使用 dismissSearch 环境属性以编程方式取消搜索字段。目前还没有 API 可以程序化地将焦点转至搜索字段。...Too complex to type checkQ:我在 iOS 14 SwiftUI 遇到一个问题,我试图有条件地显示 3 个符合 Shape 协议的对象的一个。

14.8K30

SwiftUI 在 WWDC 24 之后的新变化

视图集合SwiftUI 为 Group 和 ForEach 视图引入了新的重载,允许我们创建自定义容器, List 或 TabView。...新的标签体验使用新的 Tab 类型,SwiftUI 提供了新的可定制标签体验,带有流畅过渡到侧边。...英雄动画SwiftUI 引入了 matchedTransitionSource 和 navigationTransition,我们可以在任何 NavigationLink 实例配对使用。...框架的下一版本包括许多新 API,窗口推送、TextField 和 TextEditor 视图中的文本选择观察、搜索焦点监控、自定义文本渲染、新的 MeshGradient 类型等等,我无法在一篇文章涵盖所有内容...SwiftUI还引入了许多新的API,窗口推送、文本选择观察、搜索焦点监控等,使开发更加便捷和强大。

12910
  • Ask Apple 2022 与 SwiftUI 有关的问答(上)

    如果你不想让父视图也被更新,可以在创建对象时不使用 @StateObject 或 @ObservedObject 。...阅读 SwiftUI 的动画机制[8] 一文,了解更多有关动画的内容。自适应高度 SheetQ:如何在 iOS16 呈现与动态内容高度相匹配的 Sheet?...在常规宽度下,我们在详细视图中有一个带有导航堆栈的侧边。在紧凑宽度下,我们有一个标签,每个标签都有一个导航堆栈。...使用它们应该只创建一个实例,然后可以在子视图中读取。这应该不会增加内存的使用( 如果有的话,请提出反馈 )。如果你向你的模型对象追加越来越多的数据,你可能会增加内存的使用,这是很正常的。...image-20221022135326560San Francisco 宽度风格Q:如何在 SwiftUI 如何使用 SF 字体家族新增的三种宽度风格( Compressed、Condensed、Expanded

    12.3K20

    肘子的 Swift 周报 #014 | 发展要建立在稳定的基础上

    AnyView’s impact on SwiftUI performance[6] Martin Mitrevski[7] 本文探讨了在 SwiftUI使用 AnyView 对性能可能造成的影响。...在这篇文章,Pol Piella 详细介绍了如何在 Swift 应用程序中有效地利用稳定扩散(Stable Diffusion)模型。...他不仅阐述了如何在 Swift 应用运用现有的 CoreML 模型,还展示了使用苹果公司的 ml-stable-diffusion 库的具体步骤。...该工具能够调整屏幕顶部状态显示的各种信息,时间、电池电量和网络信号等。开发者在准备应用商店的截图或者进行其他专业演示时,经常依赖这一工具来确保状态信息的一致性和专业外观。...通过这篇文章,Wals 为那些希望深入了解如何在 iOS 开发环境运用 Git 的开发者提供了一个实用且内容丰富的起点。

    13010

    在 Text 实现基于关键字的搜索和定位

    视图中打开 URL 的若干方法[10] 一文,了解更多有关 OpenURLAction 的内容创建体验感优秀的搜索使用 safeAreaInset 添加搜索在没有 safeAreaInset 修饰器的时候...,我们通常会用两种方式添加搜索 —— 1、通过 VStack 将搜索放置在 List 下方,2、使用 overlay 将搜索放置在 List 视图的上层。...但是如果采用 overlay 的方式,搜索将会挡住 List 最下方的记录。...使用 safeAreaInset ,我们可以将搜索的区域设置为 List 下方的安全区域,这样既可以实现类似 Tab 覆盖 List 的效果,同时也不会遮盖 List 最下方的数据。...我们需要采用如下方式避免因此而导致的应用卡顿:确保搜索操作运行于后台线程过滤关键字响应,避免因为输入太快导致的无效搜索操作我们通常会在 Combine 采用 .subscribe(on: ) 来设定之后的

    4.2K30

    SwiftUI 4.0 的全新导航系统

    SwiftUI 4.0( iOS 16+ 、macOS 13+ )对导航系统作出了重大改变,提供了以视图堆栈为管理对象的新 API ,让开发者可以轻松实现编程式导航。本文将对新的导航系统作以介绍。...分栏布局 在 SwiftUI 4.0 之前的版本,可以这样使用 NavigationView 来创建拥有左右两个的编程式导航视图: class MyStore: ObservableObject {...与 NavigationStack 合作 在 SwiftUI 4.0 之前,对于多的 NavigationView ,如果我们想在 SideBar 栏内实现堆栈跳转的话,可以使用如下代码: struct...在 toolbar 的设置,通过 placement 可以设置适用的对象 隐藏 toolbar NavigationStack { ContentView() .toolbar...相当一部分开发者由于版本适配的原因并不会使用新的 API ,因此,每个人都需要认真考虑如下问题: 如何从新 API 获得灵感 如何在老版本运用编程式导航思想 如何让新老版本的程序都能享受系统提供的便利

    10.3K62

    苹果推出 SwiftData,可替代 SwiftUI 的 Core Data

    SwiftData 可轻松将一个 Swift 类转换为一个持久化模型,非常适合同 SwiftUI 一并使用。...据苹果公司称,持久性对象会在需要时从持久化存储获取并更新。 Bool、Int、String 等简单类型支持开箱可用,但更为复杂的类型则必须要符合 Codable 协议,才能于持久化类中使用。...此外,将 SwiftUI 视图接入持久化模型只需使用一个新的 @Query 属性。...SwiftData 还提供对谓词(Predicate)定义的支持,可用于过滤数据。编译时对谓词进行检查,并对类型不匹配的问题报编译错误。...为让开发者能更为轻松地迁移至 SwiftData,该框架支持在现有 Core Data 应用的逐步采用,在苹果提供的演示项目中展示了如何在一个 Core Data 应用仅部分使用 SwiftData

    1.3K30

    如何结合 Core Data 和 SwiftUI

    尽管时间相距遥远,Apple 还是投入了大量工作以确保这两种强大的技术能够完美地相互配合使用,这意味着 Core Data 就像始终以这种方式设计一样,已集成到 SwiftUI 。...使用获取请求从 Core Data 检索信息——我们描述了我们想要的内容,应如何对其进行排序以及是否应使用任何过滤器,然后 Core Data 会发回所有匹配的数据。...从那里开始,我们可以像常规的 Swift 数组一样开始使用学生,但是您会发现有一个陷阱。...更好的是,它已经将其添加到 SwiftUI 环境,这就是@FetchRequest属性包装器起作用的原因——它使用了环境可用的任何托管对象上下文。...为了帮助学生脱颖而出,我们将通过创建firstNames和lastNames数组来分配随机名称,然后使用randomElement()从中选择一个。

    11.8K30

    肘子的 Swift 周报 #038 | 更好还是更便宜?

    值得关注的是,AVP 的初代用户,许多人购买此设备并非将其作为日常计算设备使用,而是针对特定的应用场景。...前一期内容|全部周报列表 原创 SwiftUI 滚动控制 API 的发展历程与 WWDC 2024 的新亮点[3] Fatbobman( 东坡肘子 )[4] 在 WWDC 2024 ,苹果再次为 SwiftUI...iOS 18 更新,苹果公司对其照片应用进行了全面的重新设计,其中就包含了对搜索框位置和显示效果的调整。...在这篇文章,Danijela Vrzan 介绍了如何在 Sketch 应用程序创建自定义 SF Symbols 图标。...通过本文,读者将能够深入理解如何在 Swift 环境实施 WebSocket 通信,并掌握其技术优势及适用场景。

    11510

    Ask Apple 2022 与 Core Data 有关的问答 (下)

    详细内容请参阅 如何在 Core Data 中使用 Derived 和 Transient 属性[4] 一文。...在应用程序中一次性加载 CoreData 数据并将其保存在局部变量中使用多个 FetchRequests我目前在 SwiftUI使用 UICalendarView 并从 CoreData 获取数据...检索 NSAttributedStringQ:我需要将 NSAttributedString 存储在数据库,并且可以对属性字符串的任何文本进行搜索。...A:你使用的正是当前推荐的方式。此外,纯文本属性可以被 Spotlight 索引,方便它们被系统搜索。生成对应数据的纯文本以进行检索,是一种很常见的方式。...A:这听起来与另一个问题相似,我在这个问题中建议使用谓词来过滤只具有某种关系的对象。我想同样的方法应该对你有用?

    3.2K20

    何在 SwiftUI 视图中显示应用图标和版本

    前言在应用显示应用图标和版本是为用户提供快速识别应用版本和变体的好方法,无论是内部用户(测试人员或利益相关者)还是外部用户。...我们检索 CFBundlePrimaryIcon 字典 CFBundleIconFiles 键的值。这是一个包含应用图标文件名的数组。这些文件名可用于创建命名的 UIImage。...最后,我们检索 CFBundleIconFiles 数组的最后一个值。获取应用版本现在我们有了应用图标,让我们检索应用版本字符串。...我们学习了如何在 SwiftUI 应用显示应用图标和版本信息。...在获取到应用图标和版本信息后,我们创建了一个 SwiftUI 视图来展示这些信息。该视图使用水平堆栈(HStack)布局,将应用图标和版本信息并排显示。

    17522

    掌握 SwiftUI 的 Safe Area

    掌握 SwiftUI 的 Safe Area 访问我的博客 www.fatbobman.com[1] 可以获得更好的阅读体验 Safe Area(安全区域)是指不与导航、标签、工具或其他视图控制器提供的视图重叠的内容空间...SwiftUI 同时提供了一些方法和工具让开发者对安全区域有所控制。 本文将探讨如何在 SwiftUI 获取 SafeAreaInsets、将视图绘制到安全区域之外、修改视图的安全区域等内容。...在 SwiftUI ,开发者通常只有在需要获取 StatusBar + NavBar 的高度或 HomeIndeicator + TabBar 的高度时才会使用到 safeAreaInsets 。...使用 safeAreaInset 扩展安全区域 在 SwiftUI ,所有基于 UIScrollView 的组件(ScrollView、List、Form),在默认情况下都会充满整个屏幕,但仍可确保我们可以在安全区域内看到所有的内容...尽管使用 safeAreaInset 为列表在底部添加状态或自定义 TabBar 非常方便,但如果你的列表中使用了 TextField,情况将变得很麻烦。

    7.7K31

    SwiftUI 与前端框架( React)的状态管理对比

    SwiftUI 的状态管理SwiftUI 的状态管理主要依靠属性包装器, @State、@Binding 和 @EnvironmentObject 来管理不同类型的状态。...开发者可以在函数组根据需要灵活创建和管理状态,适用于复杂的 Web 应用场景。状态管理的复杂性:随着项目规模的扩大,状态管理变得更加复杂。...多个层级的状态传递可能导致组件树的状态传递变得混乱。以下是一个可以运行的简单 SwiftUI 和 React 示例,展示了如何在两个框架管理状态。...QA 环节Q1: 如何在 SwiftUI 中进行全局状态管理?...答:可以使用 @EnvironmentObject 或 ObservableObject 来在多个视图间共享状态,这样可以避免手动在组件层次间传递状态。

    14810

    SwiftUI TextField进阶——格式与校验

    SwiftUI TextField进阶——格式与校验 想获得更好的阅读体验,请访问我的博客 www.fatbobman.com[1] SwiftUI的TextField可能是开发者在应用程序中最常使用的文本录入组件了...如何在TextField实现格式化显示 现有格式化方法 在SwiftUI 3.0,TextField新增了使用新老两种Formatter的构造方法。...如何在TextField屏蔽无效字符 现有屏蔽字符方法 在SwiftUI,可以通过设置仅使用特定的键盘类型来实现一定程度上的录入限制。...如何在TextField检查内容是否符合指定条件 相较上述两个目标,在SwiftUI检查TextField内容是否符合指定条件是相当方便的。...不利于判断用户是否录入新的信息(更多的信息可参阅如何在SwiftUI创建一个实时响应的Form[10])。方案二允许不提供初始值,支持可选值。

    8.2K20

    架构之路 (五) —— VIPER架构模式(一)

    开始 首先看下主要内容: 在本教程,您将了解如何在SwiftUI和Combine中使用VIPER体系结构模式,同时构建一个允许用户创建公路旅行的iOS应用程序,来自翻译。...SwiftUI有自己独特的做事方式。如果你将VIPER职责映射到域对象将会不同,如果你将它与UIKit应用的教程相比较。 1....entity是项目的数据对象。在本例,主要的entity是Trip,它包含一个路点Waypoints列表,路点是旅程的各个站点。 这个应用程序包含一个DataModel类,它包含一个旅行列表。...导航修饰符使用presenter发布的tripName来定义标题,因此当用户键入时,它就会更新,而保存按钮则会保存任何更改。 构建并运行,现在,您可以编辑trip标题。...然后将directions复制到routes数组。 要使用presenter,创建一个名为TripMapView.swift的SwiftUI View。

    17.5K10

    全新Swift从入门到进阶实战探探iOS APP

    面向对象与命令式编程:Swift和Objective-C都是面向对象和命令式的编程语言,但Swift还整合了函数式编程的概念。例如,Swift过滤器等特性体现了这一点8。...如何在Swift实现测试驱动开发(TDD)的最佳实践?在Swift实现测试驱动开发(TDD)的最佳实践,首先需要理解TDD的核心原则和步骤。...利用声明式编程语言SwiftUI来实现用户界面可以显著提高开发效率和项目的质量19。...为了进一步提高UI设计的质量和效率,开发者可以考虑使用静态分析工具(SonarQube和Codacy)来评估和改进他们的SwiftUI项目19。...有效地使用Swift和UIKit框架进行用户界面设计需要开发者深入理解这两个技术栈,并结合现代编程范式(SwiftUI)的最佳实践来提高开发效率和产品质量。

    31310

    在 iOS 16 中用 SwiftUI Charts 创建一个折线图

    此外,自定义图表的外观和感觉以及使图表的信息易于访问也是非常容易的。 如以前的文章所示,不使用 SwiftUI Charts 也可以创建一个折线图。...系列文章 如何在 SwiftUI 创建条形图 SwiftUI 的水平条形图 在 iOS16 中用 SwiftUI 图表定制一个线图 在 Swift 图表中使用 Foudation 库的测量类型 简单折线图...从包含一周的步数的数据开始,类似于 在SwiftUI创建折线图 中使用的数据。...另外,前景的样式设置为基于stepCount数组的周期。折线图使用 x 轴的工作日来显示两周的步数,以便在周之间进行比较。...图表带有两个系列的步数数据的折线图 SwiftUI 图表带有两个系列的步数数据的折线图 结论 在 SwiftUI Charts 还有很多东西可以探索。

    3.7K20

    SwiftUI 与 Core Data —— 数据获取

    尽管在实践,如果能在确保不访问托管对象的非线程安全属性的前提下,在非创建托管对象的线程持有托管对象并不会出现崩溃的情况,但出于谨慎的考虑,我最终还是放弃了这种方式。...在 SwiftUI ,ForEach 会根据数据标识( Identifier )自动处理视图的添加、删除等操作,因此,当在 SwiftUI使用 NSFetchedResultsController...( State )实现类似的效果。...( sectionIdentifier 为首要排序条件 ),并同时提供每个 Section 在返回数组对应的起始 offset( 或对应的 ID )以及该 Section 的数据量。...在下一篇文章,我们将探讨如何在 SwiftUI 安全地响应数据,如何避免因为数据意外丢失而导致的行为异常以及应用崩溃。希望本文能够对你有所帮助。

    4.6K30

    使用 SwiftUI 为 macOS 创建类似于 App Store Connect 的选择器

    我希望构建类似于 App Store Connect 的选择器组件,使用户体验尽可能熟悉,并在本文中,将展示如何使用 SwiftUI 为 macOS 构建了这个组件。...创建选择器组件让我们分析一下,我们有一组想要在 SwiftUI 列表显示的构建。每个构建都包含一组属性,其中之一是 betaGroups,它是一个表示构建所属测试群组的结构体数组。...使用 .overlay 修改器在用户悬停在测试群组组件上时显示一个移除按钮。该按钮从构建所属的测试群组列表移除测试群组。...以上代码片段使用了 BetaGroup 结构体上的一个名为 displayName 的属性来显示测试群组的名称,类似于在 App Store Connect 的显示方式,显示名称的前两个单词的首字母大写...正如你所看到的,我们编写了一个自定义的初始化方法来过滤出任何已经属于构建的测试群组。总结文章介绍了如何使用 SwiftUI为macOS 创建类似于 App Store Connect 的选择器组件。

    19232
    领券