-
Craft search experiences in SwiftUI
Discover how you can help people quickly find specific content within your apps. Learn how to use SwiftUI's .searchable modifier in conjunction with other views to best incorporate search for your app. And we'll show you how to elevate your implementation by providing search suggestions to help people understand the types of searches they can perform.
Recursos
Vídeos relacionados
WWDC21
-
Buscar neste vídeo...
-
-
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() }
-