在 SwiftUI 中精心打造搜索体验

了解如何帮助人们在您的 app 中快速找到特定内容。了解如何将 SwiftUI 的 .searchable 修饰符与其他视图结合使用，以最好地整合 app 的搜索。我们还将展示如何通过提供搜索建议来帮助人们了解他们可以执行的搜索类型，从而提升执行体验。

资源

- 高清视频
- 标清视频

相关视频

WWDC21

下载

♪ ♪ 我是哈利 SwiftUI团队的程序员欢迎来到打造SwiftUI搜索体验 SwiftUI搜索功能是全新功能我等不及跟你们分享要如何使用这些功能有时候你会想在App里面搜寻特定的东西但很多App里面有许多数据采集所以很难找到你需要找的东西有可能是要找最新的App趋势找下一首歌或早上通勤时想找播客来听使用搜索功能就能解决这些问题最佳的搜索体验会因为App的结构与内容而有不同但通常来说所有体验会包含一个定义搜索查询的搜索栏现在可以直接在SwiftUI里搜索让我展示给你们看在这次讲解我会介绍全新的searchable修饰符这修饰符构成了SwiftUI中所有搜索功能的基础我会展示导航栏是如何结合 searchable修饰符最后我会通过新增搜索建议来解释如何延伸searchable修饰符的功能 Searchable在SwiftUI里是全新的视图修饰符在各个平台都能用它能让视图内容被搜索得到内容会决定其定义在这段发表我会通过范例来介绍这个修饰符如何用在各个平台为了更了解这个修饰符我们以天气为范例在iOS里最好的范例就是最新查询天气用的App 当你查看城市列表的时候你可以在搜索栏打字这样就能在清单上新增城市为了展示天气App是如何利用 searchable修饰符来加强天气App的功能我们来拆解它的UI结构天气App是从导航栏开始的所以会有一个浏览框之后再加上定制列表作为导航栏的内容在列表中会在cells前面多加一条ForEach 最后在天气App的导航栏增加searchable修饰符所有searchable修饰符的核心就是搜索栏的设置 searchable修饰符控制着设定好的搜索栏并延伸下去通过环境让每个平台的视图都能通过最好的方法被使用导航栏能读到搜索的区块并将它呈现为搜索栏如果没有视图使用配置好的搜索栏 searchable修饰符就会在工具栏中呈现搜索栏的默认选项搜索栏通常不是唯一跟UI搜索功能有关系的部分呈现某种形式的搜索结果是很常见的设计模式天气App就是照着这个模式只要看到搜索查询有数据输入它就会呈现其他列表来换掉定制列表更换的内容包含最新搜索问题的结果我们来看天气App 是如何通过searchable修饰符提供的数据来完成这项UI 这是天气App的定制表单 Searchable修饰符建立的新环境属性称作isSearching 天气App会用它来动态式调整呈现出的视图并根据用户是否正在搜索而做调整天气App会查找isSearching环境属性以及搜索的内容有条件式地呈现搜索结果呈现自己的结果时不妨使用覆盖如此一来用户搜寻完并回上一页后主UI的状态就不会被更动现在来多聊聊导航栏是如何结合新的searchable修饰符在开始之前我想先介绍一款我千辛万苦开发出来的App 我称它为Colors 这个App让用户能够管理自己喜欢的颜色库称做调色盘你或许想替你背景换点不同颜色替你App主题换颜色或只是想帮你新的M1 iMac选新颜色无论想做什么 Colors这款App都能满足你需求 Colors的基础架构是两列导航栏其中第一列的根视图在iPadOS跟macOS上是侧边栏而在其他平台上会是导航堆叠的基础在侧边栏你会看到我的调色库在仔细看的话你会看到被选起来的调色库你也能看到这些颜色呈现在用户设备时会有的色差大家开始用App的时候我就注意到大家喜欢各式各样的颜色他们会一直在自己的颜色库新增颜色但当颜色库的颜色越多就越难找到特定要找的色盘大家都会需要看完整个颜色库才能找到需要的色盘所以我决定要增加搜索的功能我希望此功能可以跟寻平台的习惯这样大家在用我的App时就会马上理解操作现在来看看我是如何使用 searchable修饰符来执行此功能

这个是我写的导航栏也是Colors这个App里的一部分为了要有搜索功能我在导航栏里面加了 searchable修饰符按照惯例我会编写一个binding 用来支持搜索功能这在iOS跟iPadOS上面会呈现为搜索栏当导航栏涵盖在 searchable修饰符的内容里其中一个字段就会是搜索栏哪个栏位会被使用取决于导航栏上有几个栏位因为我导航栏是两栏式我的搜索栏位会出现在侧边栏在iOS跟iPados都一样如果你希望搜索栏位不是出现在默认的栏位那你就要在你想要的栏位输入searchable修饰符道理就跟现存的工具栏修饰符一样在这款App上我会将searchable 输入在导航栏的地方就像天气App 我会用isSearching环境属性让搜索的结果动态式呈现在侧边栏 macOS上的searchable修饰符会让搜索栏出现在工具栏最多空间延伸的地方来因应平台上会有的预期行为像是窗口缩小时会跟着自动引缩我会将我搜索结果呈现在App详细资料窗格里为了就是要在macOS上提供更佳的体验 watchOS呈现方式跟iOS差不多在watchOS工具栏正上方也有搜索栏 SwiftUI选择在第一栏位置呈现搜索栏你可以注意到我没有为了不同的行为在不同平台上改变searchable修饰符的位置我App的架构在这些平台都一样都维持两栏式导航栏 SwiftUI可以辨识这种架构以及不同平台的习惯所以它自己会帮我处理好这些工作我在看Apple tvOS的时候我发现我App的架构在其他平台上还有进步空间搜索栏在Apple tvOS 常会以标签页呈现但我的App没有标签页视图只要做些调整我的App就能解决这问题不需要呈现出两栏式导航栏我就能提供更具tvOS特色的体验我只需要单栏式导航栏并将标签页做为导航栏的视图内容在标签页视图中我会沿用现存侧边栏再新增一个搜索栏搜索栏代表了占位视图被第一次浏览该栏位的人看到的样子最后我会将searchable搜索栏移到导航栏区块来包装程序代码当搜索栏收到输入的搜索数据后就会直接显示出搜索结果我将搜索功能导入每个平台上因为SwiftUI有宣告式的特点所以我App的导航结构可以保持一致我可以依赖SwiftUI 并让searchable修饰符自动帮特定的导航结构选择最合适的界面我App的结构在tvOS上会改变我把在searchable修饰符学到的应用在不同的结构上只有我定义为“searchable”的内容才会随着该结构改变现在你有了searchable修饰符的知识我们准备讲最后一个主题那就是搜索建议用过我App搜索功能后有用户反应虽然他们很喜欢搜索功能但有时候会不清楚他们可以搜索哪些东西很多App会提供搜索建议给用户让用户知道有哪些问题可以搜索这些建议代表了完整的搜索查询例如在macOS 搜索建议会出现在菜单上在iOS上会出现代表列表的按钮在watchOS上则是一整个列表搜索建议可以让用户知道有哪些东西可以搜索 SwiftUI提供简单的方法让你能在App上新增搜索建议让我们来瞧瞧观察我的App 你可以发现到我在searchable修饰符多加了text Searchable修饰词提供选择性参数这参数就是我列的suggestions 我会提供新的视图给suggestions参数可能是一些静态的按钮或更有可能是ForEach 并且是来自我App数据库或服务器的suggestions SwiftUI能读取这视图并且会根据是否有建议可以给才来呈现搜索建议以watchOS为例当你输入信息就会出现搜索栏的图像最常见的模式就是提供一个ForEach按钮有互动之后就会更新提供给searchable修饰符的 text binding 以及搜索建议的文本值事实上我们希望能普及化这模式因此新增了search completion修饰词你可以在非互动式的视图使用search completion修饰符它会将视图转成按钮并更新搜索内容以及删掉最新建议如果你在开发App 而用户会先根据搜索建议互动并用来取得更完整的搜索结果你可以考虑使用新的onSubmit修饰符来知道何时给搜索结果并将搜索值传给onSubmit 这样当用户提交搜索查询时你提供的闭包就会被启用这情况通常会出现在用户选取搜索建议时或是用户在硬件输入设备按下了Enter键你可以将与搜索无关的提交使用新的onSubmit修饰符来结合文字输入格或安全栏位搭配search completion修饰符并使用suggestions参数可以简易帮你App提供一个有效又简单的搜索建议功能希望你们会喜欢这段在讲 SwiftUI能提供的搜索功能的相关介绍总之 searchable修饰符能让你将视图内容变成搜索得到的信息导航栏与searchable修饰符结合根据导航栏的内容提供最适合平台的体验利用isSearching环境性质让用户在搜索的时候你App的UI可以动态式改变内容利用search completion修饰符以及searchable修饰符的 suggestions参数在你的App里增加搜索建议你现在可以开始在所有的SwfitUI App里增加搜索功能了祝你们大会愉快 [音乐]

0:10 - Colors Suggestions

struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text) {
           ForEach(suggestions) { suggestion in
                Button {
                    text = suggestion.text
                } label: {
                    ColorsSuggestionLabel(suggestion)
                }
            }
        }
    }
}

1:17 - New Searchable Modifier

ContentView()
    .searchable(text: $text)

1:58 - Weather Search

NavigationView {
    WeatherList(text: $text) {
        ForEach(data) { item in
            WeatherCell(item)
        }
    }
}
.searchable(text: $text)

3:11 - Weather List

struct WeatherList: View {
    @Binding var text: String
    
    @Environment(\.isSearching)
    private var isSearching: Bool
    
    var body: some View {
        WeatherCitiesList()
            .overlay {
                if isSearching && !text.isEmpty {
                    WeatherSearchResults()
                }
            }
    }
}

5:07 - Colors Search

struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text)
    }
}

7:15 - Colors Search with TV

struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            #if os(tvOS)
            TabView {
                Sidebar()
                ColorsSearch()
                    .searchable(text: $text)
            }
            #else
            Sidebar()
            DetailView()
            #endif
        }
        #if !os(tvOS)
        .searchable(text: $text)
        #endif
    }
}

9:09 - Colors Search Completions

struct ColorsContentView: View {
    @State var text = ""
    
    var body: some View {
        NavigationView {
            Sidebar()
            DetailView()
        }
        .searchable(text: $text) {
           ForEach(suggestions) { suggestion in
                ColorsSuggestionLabel(suggestion)
                    .searchCompletion(suggestion.text)
            }
        }
    }
}

10:21 - On Submit

ContentView()
    .searchable(text: $text) {
        MySearchSuggestions()
    }
    .onSubmit(of: .search) {
        fetchResults()
    }

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。